Обновяване на паметта CSS рамка

За да създадете заоблени ъгли може да се прилага не само CSS3, но CSS «старец», можете да направите произволни цифри показват. Вярно е, че в миналото, преди откриването на тези техники в демонстрационни обиколки или стрелки-указатели може да се прибегне до използването на абсолютно позиционирани фонови изображения. За щастие - най-малко, тъй като ние щастливо по-далеч от Photoshop - това не е така.

Вие вероятно са запознати с обичайното използване на рамки.

В горния код използва елемент рамката, за да 1px. Просто и лесно, но можете да промените синтаксиса малко.

В допълнение към трансфера на определена стойност на границата ширина може да се използва като алтернатива на трите ключови думи: тънък, средносрочен и дебел.

HTML5 и CSS3 практика от нула до резултата!

Въпреки, че първоначално използването на конвенционални писма не може да изглежда необходимост, има много случаи, когато това е предимство, например, когато е необходимо да се променят някои от аспектите на кадъра при настъпване на определено събитие.

Може би трябва да промените цвета на рамката по време на даден потребител на мишката върху даден елемент. Формуляри за кандидатстване стенографски писане на стойностите на пикселите изискват повтарящи се.

А по-елегантен подход и за кратко - е насочено към финализиране на граничен цвят имота.

В допълнение, тъй като скоро ще открият, тази техника нормален запис е полезно при създаване на CSS произволни фигури по избор.

Гранична-Radius

граничен радиус - любимо дете CSS3 - първият новата функция е широко разпространена в общността. Преведено, това означава, че в допълнение към Internet Explorer 8 и по-ранни версии, всички браузъри могат да показват заоблени ъгли.

До този момент е необходимо да се използват префиксите на производителя за Webkit и Mozilla, да се прилагат правилно стилове.

Въпреки това, сега можете, без да се страхува, да се откажа от опциите за продавач версия на производителя и просто да се прибегне до приетата под формата на: граничен радиус.

Както можете да очаквате, можете също да дефинира специални стойности за всяка страна на блока.

В горния код за определяне на границите-горния десен радиус и гранично-долния ляв радиус ще бъде нула излишно, освен ако елементът не наследява стойности, които трябва да се показват отново.

Което е много подобен на границата или подложка, тези настройки могат да бъдат компресирани, ако е необходимо, на един имот.

Като пример (и колко често това се прави от уеб дизайнери) лимон форма може да бъде възпроизведен с помощта на CSS и граничен радиус имоти, като този:

Над изходните

Много дизайнери са щастливи да притежават знания, описана в този раздел; но има много начини да разширят хоризонтите си!

множество фреймове

Има много техники, които могат да бъдат достъпни с формулирането на проблема за един елемент от няколко кадъра.

Гранична-Style

Солидни, прекъсната и пунктирана - най-използваната стойност на граничния стил имот, има няколко други, включително и канал и билото, което може да бъде полезно.

Или във вид на обикновен запис:

Въпреки че това е безспорно удобно, всъщност, ефектите на ластик или вдлъбнатини не са множество фреймове.

Най-популярната техника за създаване на два кадъра - е да се възползвате от свойствата на контур.

Въпреки че този метод работи добре, тя е ограничена до две рамки. Ако искате да създадете пластове, градиент ефект, той изисква по-различен подход.

псевдо

Когато очертанието на метод не е достатъчно, алтернативен подход - да се възползват от: преди и: след това, и се отнася за съдържание, създадено с всички необходими допълнителни кадри.

Това може да не е най-елегантната подход, но определено работи. Единствената уговорка - много лесно да се обърка реда, по който цветовете се прилагат рамка. Често използването на правилната комбинация изисква определено ниво на "предположения и проверки".

Каре-Сянка

"Smart" начин за създаване на неограничен брой кадри - използвайте опция разпространението на имот CSS3 бокс-сянка.

В този случай, ние сме добре да се използват бокс-сянка по начин, който не означава непременно, в началния писането на спецификации.

С инсталирането на компонентите X, Y, и замъгляване на 0, може да се използва за създаване на разпространение стойност доверен рамки на правилните места. Тъй като кутия сянка може да се добави чрез използването на запетая в комин, броят на възможните нива за неопределено време.

Тази техника изглежда доста добре в предишните версии. При по-старите браузъри, които не признават имот бокс-сянка, той просто изобразяват една червена рамка за 5px.

Запомнете: дизайнът не трябва да бъдат еднакви във всички браузъри. Напиши CSS в повечето съвременни браузъри, а след това съответно осигури подходяща алтернатива.

Промяна на ъглите

В допълнение към предаването на една стойност на граничния радиус, може да бъде осигурена като алтернатива на две - разделени с наклонена черта / - за определяне на уникални стойности за хоризонтална и вертикална радиуси. Например ...

HTML5 и CSS3 практика от нула до резултата!

Този метод е особено полезен, когато трябва да се симулира светлината, продължава къдри вместо обща заоблен ъгъл. Например, следния код ни позволява да се леко се отклонява от квадратна форма, за да се получи завихряне, ефект "на хартия".

CSS цифри

Може би най-точна рамка приложение - когато интелигентно прилага за елементите с нулева ширина и височина. Объркващо, нали? Нека да видим ясно.

За да се вземе повече от следните примери следното маркиране ...

... и на следните основни стилове:

Доказано най-често, когато на един пример за това как предприятието може да се използва задължително показалка стрелка на фигура CSS- проект.

За да разберете как да използвате стрелката образна CSS, за да присвоите уникален за всяка страна граничен цвят (цвят рамка), а след това се намали стойността на ширина и височина на контейнера до 0.

Да приемем, Разделение клас стрелка с контейнера:

Както е показано в началото на този раздел, по-чист синтаксис получавате, когато не се използват стенограмите версия на всеобхватна:

Можете дори по-нататък може да го намали чрез групиране на цветови стойности.

Интересно е, нали? Ако се върнете, тогава съществува идеалното здравия разум. Това е единственият възможен начин да се изравнят на цвета, което позволява на ширината и височината на контейнера равна на нула. Какво става, ако сега ние ще инсталира всички цветове на рамката, в допълнение към синята страна, свободно?

Отличен! Но създаването Разделение .arrow просто да добавите към страницата на стрелката не изглежда добра представа за семантиката. Вместо псевдо може да се използва за прилагане на стрелка на показалеца преди или след свързан елемент.

Създаване на "вербална балон"

За създаване на "дума балон" на 100% CSS започва с маркиране.

След това трябва да се прилагат няколко основни стилове.

Стрелка курсора ще се прилага чрез псевдо след.

Псевдо-елементи: преди и: след може да се използва за въвеждане на съдържание, генерирано от преди или след съдържание на елемента.

На този етап това е само въпрос на възпроизвеждане на стрелката и да го поставите на правилното място. Ще започнем с абсолютното позициониране на съдържание, повторно определяне на ширината и височината, но и да приложите цвят на рамката.

Тъй като знаем, че стрелката да сочи надолу към изображението по-горе се вижда, че всички рамки с изключение на червено (или горната част), трябва или да се пропуснат, или определени за прозрачност.

Когато създавате CSS фигури, дължащи се на факта, че ние не може да използва имота ширина за да се определи ширината на стрелка на показалеца, трябва да се използва вместо граница ширина собственост. В този случай, стрелката трябва да е малко по-; така, че граничните ширина трябва да се увеличи до 15px. Също така, ние ще публикуваме върху стрелката в долната централна част на контейнера, като се използват свойствата на върха и си тръгна, съответно.

Почти приключихме; в последния етап е необходимо да се променя цвета на стрелката, за да го направи същото като на фона на контейнера. Също така е необходимо да се промени режима за да позволи на ширината на рамката (15px). И докато сме тук, е приложима и лесно граничен радиус, че контейнерът приличаше повече на "балон".

Не е зле, нали? Абстрахиране кода в няколко класа на няколко приложения, и сте подготвени за всички бъдещи проекти.

Бонус: Най-добрият вертикална Центрирането

Недостатъкът на използването на линия височина за вертикалното подравняване на текста е, че можете да се ограничават до един ред. Ако искате две или повече редове, височината на всеки е твърде голям за текст. Умно решение - е настроена за показване на таблицата "дума балон" и на дисплея за маса-клетка в параграфа, текстовият опаковката. Това след това ни позволява да приведе текста в средата, съответно.

На следващо място, модифицирана CSS.

Ако връзки за показване: маса съживи лоши спомени от старомодните оформления на базата на таблиците, не се притеснявайте. Тези свойства принадлежат изцяло на стила, в който трябва да се показва на елемента.

Ние не са ограничени от триъгълници; CSS е в състояние да произвежда всички видове форми - сърца, и дори символът за биологична опасност!

кратко резюме

Макар да е вярно, че синтаксиса на обикновената граница: 1px плътно черно извървя дълъг път да се извърви, ако сме умни, ние можем да се създаде разнообразие от полезни ефекти, икони и форми. Кой би си помислил, че рамката ще бъде такъв мощен инструмент? Основното нещо - не забравяйте, че стиловете на често срещани форми или "дума на балони" трябва да се създаде само веднъж и след това да се абстрактно с практическите занятия за бъдеща употреба.

Редакция: Екип webformyself.

HTML5 и CSS3 практика от нула до резултата!

Най-IT новини и уеб разработки на нашия канал Телеграма