انت هنا الان : شبكة جامعة بابل > موقع الكلية > نظام التعليم الالكتروني > مشاهدة المحاضرة

Introduction to CSS3 - Part I

Share |
الكلية كلية تكنولوجيا المعلومات     القسم قسم شبكات المعلومات     المرحلة 2
أستاذ المادة حيدر محمد حبيب الخميس       26/03/2013 06:56:19
CSS3 is the latest standard for CSS. CSS is used to control the style and layout of Web pages. In this lecture we are going to learn some of new features in CSS3.
CSS3 is completely backwards compatible, so you will not have to change existing designs. Browsers will always support CSS2.
CSS3 Modules
CSS3 is split up into "modules". The old specification has been split into smaller pieces, and new ones are also added.
Some of the most important CSS3 modules are:
• Selectors
• Box Model
• Backgrounds and Borders
• Text Effects
• 2D/3D Transformations
• Animations
• Multiple Column Layout
• User Interface
CSS3 Borders
With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border - without using a design program, like Photoshop.
In this chapter you will learn about the following border properties:
• border-radius
• box-shadow
• border-image
Till the date of this lecture:
• Internet Explorer 9 supports border-radius and box-shadow.
• Firefox supports all of the new border properties.
• Chrome and Safari support border-radius and box-shadow, but require the prefix -webkit- for border-image.
• Opera supports border-radius and box-shadow, but requires the prefix -o- for border-image.
CSS3 Rounded Corners
Adding rounded corners in CSS2 was tricky. We had to use different images for each corner.
In CSS3, creating rounded corners is easy.
In CSS3, the border-radius property is used to create rounded corners:

CSS3 Box Shadow
In CSS3, the box-shadow property is used to add shadow to boxes:

CSS3 Border Image
With the CSS3 border-image property you can use an image to create a border:

CSS3 The background-size Property
The background-size property specifies the size of the background image.
Before CSS3, the background image size was determined by the actual size of the image. In CSS3 it is possible to specify the size of the background image, which allows us to re-use background images in different contexts.
You can specify the size in pixels or in percentages. If you specify the size as a percentage, the size is relative to the width and height of the parent element.

CSS3 background-origin Property
The background-origin property specifies the positioning area of the background images.
The background image can be placed within the content-box, padding-box, or border-box area.

Dear Students: Find the complete lecture in the attached pdf file.
Source: w3schools


المادة المعروضة اعلاه هي مدخل الى المحاضرة المرفوعة بواسطة استاذ(ة) المادة . وقد تبدو لك غير متكاملة . حيث يضع استاذ المادة في بعض الاحيان فقط الجزء الاول من المحاضرة من اجل الاطلاع على ما ستقوم بتحميله لاحقا . في نظام التعليم الالكتروني نوفر هذه الخدمة لكي نبقيك على اطلاع حول محتوى الملف الذي ستقوم بتحميله .
download lecture file topic