Преди да отговоря на този въпрос, нека да си припомним едни от най-често използваните и приятни техники в настоящият господар на форматирането HTML, а именно Cascade Style Sheet 2.0 (CSS2).
На първо място определено е позиционирането на div елементите. Центрирани сайтове, адаптиращи се дизайни, релативно позициониране на елементи, в които пък често слагаме абсолютно позиционирани.
Отиде си цяла една епоха на HTML лейаути изградени от таблици, вложени в други таблици, вложени в трети таблици… за щастие днес таблиците се използват само за истинското им семантично приложени, а именно таблици с данни.
Второ често срещано приложение, е стилизирането на списъци. Списъците се наложиха като основна част от навигацията. Например главното меню на един сайт, ако не бяха приложени css стилове към него, надали бихте го погледнали дори ;) Благодарение на background: селектора и графичните дизайнери(техните картинки), главните менюта се превърнаха в удобна, бърза и атрактивна за ползване част.
Честно казано само за главни менюта, css hover-и, подменюта с дропдаун, мега дропдауни и тн.… спокойно може да се напише цяла статия, но да се върнем към основните готини неща, с които свикнахме в CSS2.
:hover макар и псевдо клас, благодарение на него огромна част от бутоните и банерите се освободиха от javascript-a и започнаха да подменят или премества фонови картинки при интеракция с курсора на мишката.
CSS2 предложи чудесната възможност за използване на image sprite-ове, която както и да бъде погледната е само, един голям плюс.
И последното нещо, на което ще обърна внимание преди да се прехвърлим към същинската тема: „Защо ще е прекрасно, когато всички браузъри подържат CSS 3.0“. CSS2 предложи много. Около 1/3 от фронт енд програмирането се състои в писане на css, все пак това е презентацията на сайта. * (разделяйки основно фронтенд-а на html, css, javascript).
И понеже писането не е малко, a броя на браузерите различен от един, разработчиците създадоха:
И така след тази кратка хвалебствена интродукция и ретроспекция, да приветстваме CSS3.
Преди да бъда нападнат от поданниците на CSS2, знам че не умрял, и знам че CSS3 не е коронясан, просто израза ми харесва. Още от декември 2005 се разработва третата версия на CSS, но чак в последно време се шуми толкова много и това определено е и заради неговият брат по оръжие HTML5… и все пак да вървим по нашата златна пътека.
CSS3 предлага много нови функции и възможности, като най-сигурният начин да ги усетите и пробвате е да си пуснете браузър, който подържа CSS3 - такава информация можете да намерите например тук: http://www.findmebyip.com/litmus . Не се притеснявайте, ако ползвате несъвместим браузър и при вас слънцето ще огрее скоро.
Това е първото, с което ще започна, защото все пак за да приложим дадени CSS свойства трябва изберем конкретен елемент или съвкупност от такива. Новите селектори намаляват нуждата от писане на специфични и допълнителните класове. Вече няма да създаваме класове за първи, последен, предишен, родителски, алтернативни редове в таблици, включен, изключен бутон и тн., а това ускорява значително времето за разработка. Понеже обичам код, ето няколко по интересни селектора, които със сигурност ще станат добра практика.
div[id^="nav"] – избира всеки елемент, чието id започва със низа от символи nav
div[id*="content"] – избира всеки елемент, чието id съдържа низа от символи content
li:nth-child(odd) и li:nth-child(even) - избира всеки нечетен или четен li елемент, които имат един и същи родителски елемент. Вместо ключовите думи odd и even можете да ползвате и числа и формули 3, 4n+1, което съответно ще селектира всеки 3,6,9,…; а формулата оказва да бъде избран 1 и след това 5,9,10
Div.newsText > p:first-child – избира първият параграфа от div с клас newsText, същото като :nth-child(1) (виж по нагоре)
Div.newsText > p: last-child – избира последният параграф от div с клас newsText, същото като :nth-child(1) (виж по нагоре)
Aко се чувствате леко главозамаяни, разгледайте на спокойствие официалната документация за този и други селектори:
http://www.w3.org/TR/css3-selectors/#nth-child-pseudo
Още една огромна стъпка към освобождаването на дизайна. Фонове с градиенти, обли ъгли, текстови ефекти за бутони, банери и какво ли още не… Всичко това, вече ще може да бъде динамично, без нужда от предварително подготвени картинки. По-лесна поддръжка, по-бърза и лека страница. Относно цветовете и градиентите, просто отидете и се позабавлявайте: http://gradients.glrzad.com/
Край на странните трикове, с по два текста един под друг за да постигнем сянка или бевъл ефект, вече имаме магическата сянка:
.ourCoolCSS3Class {
text-shadow: 2px 2px 2px #DD2200;
font-size: 2.2em;
color: #f5f5f5;
}
Аз съм текст със сянка. Приятно ми е да се запознаем.
Внимание! Сянката е сянка, само докато я възприемате като такава, ако обърнем посоката т.е. да е над буквите:
text-shadow: 0px -11px 10px #C60, 0px -3px 9px #FF0;
от сянка получаваме сияние наподобяващо пламъци. Отново за да се възползвате максимално е добре да имате опитен дизайнер, който да ви помогне с идеи и избор на цветове.
Нека да спомена и за възможността да слагате по няколко картинки за фон на един елемент и да ги позиционирате, където пожелаете. По този начин, отпада безумното създаване на вложени div-ове, ето и самата декларация:
div#coolCSS3Background {
background: url(Plains.gif) top left no-repeat,
url(imageBg2.png) bottom left no-repeat,
url(imageBg3.jpg) bottom right no-repeat;
}
Не забравяйте!
Редът, в който въвеждате картинките е реда, в който се показват по нива, т.е. най-отдолу са последните по реда на въвеждане.
Естествено отново доброто въображението и умелата дизайнерската ръка, ще играят огромна роля за постигането на по-забележителни неща.
Една от може би любимите добавки на всички дизайнери. Край на въртенето на Verdana, Arial и Tahoma. Край на рязането на картинки, които съдържат само текст или дори и вторият стейт на текста, ако желаем той да бъде линк. С въвеждането @font face ** в употреба, получаваме възможността да качим шрифта и да опишем всичко просто така:
@font-face {
font-family: Orbitron-Black;
src: url(‘Orbitron-Black.ttf’);
}
.OrbitronCSS3 {
font-family: 'Orbitron-Black';
font-size: 2em;
}
That's one ICE Calipers!
Чудесно е нали ? Да се чуди човек, защо им трябваше толкова много време.
Естествено трябва да споменем, че със въвеждането на новите шрифтовете, както при картинките и другите типове медия. Трябва да проверите как стоят нещата с авторските права, и с правата за употребата им въобще. Все пак използвайки го на сайта си, шрифта ще е достъпен, за всички.
Анимацията беше запазена марка на Flash и JavaScript… вече и CSS 3 се включва в забавата. Кодовите думички са: Transitions, 2D и 3D Transform и Animation. Границите за анимациите, са безгранични… Да! Просто си представете всички неща, които досега правехме с JavaScript: галерии с преливане от картинка в картинка, анонси, скролване на текстове и картинки и тн. Можете да разгледате тези примери: http://css3.bradshawenterprises.com и ще си опресните идеите за това къде и какво по сайта можем да раздвижим.
CSS3 навсякъде
Преди да завършим темата. Ако сте от хората „задължени“ да ползват IE 6,7,8 и все пак имате огромното желание да се порадвате на CSS3. Обърнете внимание на следните проекти:
PIE - Progressive Internet Explorer
http://css3pie.com е JavaScript базиран и има единствената цел, да добави поддръжка на декоративните функции на CSS3 под Internet Explorer 6 до 8. PIE (progressive internet explorer) следва пряко спецификациите на WC3, така че да е нужно да пишете css само веднъж и той да „проработи“ под всички браузери.
Modernizr
http://www.modernizr.com е отново JavaScript библиотека като разликата с PIE е, че modernizr ви помага да отчетете, какъв е браузъра, който ви посещава и каква част от CSS3 подържа (например rgba(), border-radius, CSS Transitions и др.) Modernizr ви дава възможност да използвате css3 и html5 и да засечете, кога даден браузър не подържа използваните от вас техника, като в тези случаи да подготвите алтернативно представяне.
Последно изречение, което надявам се ще запомните и предадете на останалите:
Благодарности на World Wide Web Consortium.
Бележки:
* CSS2 предлага наистина много възможности и за тези, които все пак са любопитни да чуят още и още ще нахвърлям само ключови неща, които да потърси и видите: CSS Rollover buttons, CSS Rounded Cornenrs, CSS Sticky Footer, CSS Accordion Effect, CSS Line Graph, Advanced CSS Menu, CSS Sliding Sprite Window
** Много любопитно е, че @font-face е бил предложен още по времето на CSS2 и въведен в употреба в IE5, НО … IE са единствените, които го приемат използвайки Embedded Open Type (.eot) формат. Никой от другите браузери, не желае да го ползва. С релийза на Safari 3.1 обаче се включва поддръжката на TrueType (.ttf) или OpenType (.otf) и от тук всичко започва да изглежда по-добре.
*** По пример от частта за CSS2 ето още малко неща, за които ще ви е интересно да разгледате: Multiple Column, Text-overflow, Background-size, Теxt-Stroke, CSS3 Buttons, HSL, HSLA, RGBA colors
Вашата оценка:
Достигнат рейтинг: / 5. Гласувания: