Прости CSS3 техники, които трябва да знаете
През 13-те години на съществуване на CSS, този език се превърна в мощен инструмент, който ви позволява да разработвате по-продуктивни и красиви уебсайтове. Много нови функции в най-новата версия на CSS (CSS3) са много полезни и не трябва да се пренебрегват при създаването на модерни сайтове.
Ще разгледаме няколко основни неща, които трябва да знаете за CSS3. При всички тези иновации е важно да се съсредоточите върху най-важните. Въпреки че все още не всички браузъри поддържат този стандарт, това е страхотно време за тези, които обичат да експериментират.
Много фонове
CSS3 позволява множество фонови изображения да бъдат приложени към елемент, използвайки множество свойства. Тези свойства са: фоново изображение, фоново повторение, фонова позиция и фонов размер. За да включите множество фонове в рамките на един елемент, трябва да дефинирате правилните свойства, разделени със запетаи.
Селектори
CSS3 селекторите ви позволяват да избирате елементи, за да приложите по-прецизно свойствата на стила, давайки ви възможност да избирате сложни групи от елементи. Новите селектори не само ви спестяват време, но и свеждат HTML маркирането до минимум. Намаляването на използваните класове и идентификатори е неизбежно :), което ще позволи по-добра организация на стиловия лист.
Общ комбинатор на елементи от едно и също ниво
В CSS 3 се появи нов тип комбинатор - общият братски комбинатор. Този селектор е насочен към всички елементи на едно и също ниво на определен елемент. Например, ако искате да насочите параграфи в същата йерархия като заглавия от 1-во ниво, ще трябва да:
Селекторът по-горе ще работи (направете го червен) върху първия p елемент под елемента h1. Но няма да работи с втория p елемент, тъй като не е на същото ниво.
Ново псевдокласове за по-висока специфичност без скриптове
Ето примери за нови псевдокласове:
- :last-child - избира само последния дъщерен елемент. - :nth-child(n) - избира n-тия дъщерен елемент (например за създаване на зебра таблици). - :not(e) - избира всички освен e.
Пълен списък на CSS3 псевдокласове е достъпен тук.
Преоразмеряване (преоразмеряване) на елементи
Със свойството за преоразмеряване на CSS3 вече можете да преоразмерявате елементи. Не е лошо - нали? Уловката: засега работи само в Safari. Следният блок от код ще позволи поставянето на малък триъгълник в долния десен ъгъл на елемента, с който можете да преоразмерите.
По-добри шрифтове
Текстови сенки
Свойството text-shadow ви позволява да добавяте сянка под HTML текстови елементи. Винаги трябва да се уверите, че текстът е четим, в случай че браузърът на потребителя не разбира CSS3.
В следващия пример прилагаме тъмносиня падаща сянка, която е изместена надясно с 2px, надолу с 5px и има размазване с радиус 2px за всички заглавия от ниво 1.
Заоблени ъгли
Закръгляването на ъглите не е лесно. С CSS3 обаче това е много лесно да се направи с помощта на новото свойство border-radius.
Например кодът по-долу ще направи 10px кръг за div a:
В кода по-горе - moz за Firefox и - webkit за Safari и Chrome.
Заключение
CSS3 ни дава повече контрол върху HTML елементите, отваряйки възможността за създаване на сложни и гъвкави дизайни, които не разчитат толкова много на графики и скриптове.
Този урок е подготвен за вас от екипа на ruseller.com Източник на урока: www.sixrevisions.com Превод: Максим Шкурупий Урокът е създаден: 18 март 2010 г. Преглеждания: 38788 Правила за препечатване
5 последни урока от категорията "CSS"
Забавни ефекти за букви
Малък ефект с интерактивна анимация на букви.
Изпълнение на забавни съвети
Малка концепция от забавни съвети, които са внедрени в SVG и anime.js. В допълнение към специален стил, примерът реализира анимация и трансформация на графични обекти.
Анимирани букви
Експеримент: анимирани SVG букви, базирани на библиотеката anime.js.
POV слънчеви очила
Страхотен експеримент на уеб страница, която се показва „от първо лице“ през слънчеви очила.
Навигация в падащо меню
Експериментален навигационен скрипт за падащо меню.