Заоблени ъгли в CSS и HTML
Много често, уеб дизайнери в работата си променя формата на геометрични фигури, картини, снимки, и т.н. при което се получават заоблени ъгли. Това дава завършеност на проекта и приятен дизайн.
Има най-различни начини за преобразуване на сложността на изпълнението на един нормален правоъгълник в правоъгълник със заоблени ъгли. Очакваме в две от най-прост и бърз начин, и се научи да прави картината и рамката около изображението със заоблени ъгли за уебсайт дизайн и уеб страници:
1. заоблени ъгли с помощта на CSS и HTML код с влизането в style.css стилове.
2. Закръгляване ъгли с HTML код, без да пишете стил файл.
3. изображения със заоблени ъгли. Рамката около HTML на изображението.
1. заоблени ъгли с помощта на CSS и HTML код с влизането в style.css на стилове
Помислете за първия метод за производство на правоъгълник със заоблени ъгли с помощта на CSS и HTML код с влизането в style.css стилове.
Какво е CSS
CSS - Cascading Style Sheets е (Cascading Style Sheets - CSS), с помощта на специален код. С него можете да промените шрифтовете. форма и цвят елементи. на уеб приложения за позициониране елементи на страницата. включват фонови изображения. CSS3 най-новата версия на развитието на CSS.
Работа с CSS и HTML кодове и файлове лесно и достъпно. Основното, което да направи всичко много внимателно и бавно.
Направете правоъгълник с граница в CSS
За да обрисуват един обикновен онлайн геометрична правоъгълник, ние трябва да се опише нейните параметри: дължина, височина, цвят форма, цвят на фона на блока и ако е необходимо, на кадрите стилове (дебелина, цвят и т.н.). За тази форма следващата CSS единица, които са описани стилове (параметри) на правоъгълника:
Кодът на цвят е посочено в шестнадесетичен и може да се състои от шест знака (пълното си код) или три знака (съкращение код). За да се намали кода за цвят, може да бъде в случай на съвпадение на първата цифра във втората, третата, четвъртата и петата част на шести. Например # BB00CC съкращение код може да бъде записано като # b0c. Буквите A, B, C, D и Е, цветен код, използвайте само латински.
Значение 3px в граничния атрибут показва ширината на рамката.
След въвеждане на файловете style.css стилове можем да покажем нашата правоъгълник навсякъде в сайта. За да направите това, поставете HTML маркер на мястото, където трябва да видим правоъгълник. Маркерът е така:
В резултат на издаване получи правоъгълник с рамката.
Как да си направим заоблени ъгли в CSS
За да се закръгли ъглите с помощта на граничен радиус атрибут.
Бихме могли само да добавите този атрибут. Това обикновено показва резултат от закръгляване в по-новите версии на браузърите, но много потребители все още имат по-стари версии, където този атрибут не се работи правилно. Ето защо, за съвместимост, ние добавяме още няколко описания на този атрибут е свързан директно към различните браузъри, в нашия блок в style.css файла, да получите следния код:
HTML-DIV тагове ще ни даде правоъгълник в рамка със заоблени ъгли:
Как да вмъкнете текст в рамка
За настаняване в правоъгълник на текста, който трябва да добавите CSS блок атрибут текстови тире на от краищата на уплътнение. и HTML тагове ще съдържа текста, който искате, като "pib9.ru". Така CSS единица има следния вид:
и HTML тагове за издаване на текста ще изглежда така:
Качваме се на правоъгълник със заоблени ъгли и текста:
Ако от кода за отстраняване на ширината и височината на правоъгълника за размера описанията на атрибути. можете да получите тези форми с заоблени ъгли:
В този случай, да размерите на форма средни: нива дължина съответства на ширина и височина се променя като матрицата запълване съдържание.
Усъвършенстването избрани ъгли
В описанието на стилове 10px параметър атрибут показва граница радиус радиус кривина, която може да се променя чрез избора на желания един. Ако посочите 0, ще настъпи закръгляването. Този имот може да се възползва, когато трябва да се направи избраните закръгляване ъглите.
Изписва се стойностите на радиус на кривината, за всеки ъгъл сочи нули където анулират закръгляване. Например, да анулира закръгляване на третия и четвъртия ъглите. Нашата код ще изглежда така:
Countdown ъгли са в посока на часовниковата стрелка, като се започне от горния ляв ъгъл, т.е..:
2. горния десен ъгъл.
3. долния десен ъгъл.
4. долния ляв ъгъл.
По този начин се получава правоъгълник със заоблени избран само в горните ъгли.
2. Закръгляване ъгли с HTML код, без да пишете стил файл
Помислете за втория метод за производство на правоъгълник със заоблени ъгли с помощта на HTML код, без писмено стил файл.
HTML заоблени ъгли
Има една малка особеност, което допълнително улеснява целия процес - е HTML заоблени ъгли. Тя се намира във формирането на HTML код, които са написани на същия стил като кодовете в CSS. Тя използва същите качества като в CSS блок и не е необходимо за style.css файла за запис единица. С една дума - да замести напълно код HTML CSS код.
Вместо да ни CSS блок е HTML скрипт, който се поставя на мястото, където трябва да се дава по-заоблен правоъгълник:
Първият начин да се развие в ъглите може да се използва, когато една и съща форма, без да се променя стиловете използва повече от веднъж. Вторият метод се използва за формите, стилове, които се използват само веднъж.
3. изображения със заоблени ъгли. Рамката около изображението HTML
Аз също искам да ви даде полезна информация. Често използване на изображения за уеб дизайн. наистина искате да ги направят още по-красива, промяна на тяхната форма, рамкиране рамка на красивите цветове и различни ширини. Това повдига въпроса: "Как да се закръглят ъглите на снимката?".
Тя е много проста, и сега ние трябва да се научат.
Обръщане на снимката на сайта, което го прави фон за себе си в DIV на фона маркер. Ние получаваме следния код и картинката:
URL адресът на атрибут ( "") поставете линк към вашата снимка.
Завършете ъглите на рамката на картината с добавянето на
Усъвършенстването ъглите на изображения в CSS и HTML, и добавяне на рамка може да се направи по два начина, както е описано по-горе.
Използването на първия метод на тази статия, код на изображения за стиловете подават и етикет Разделение на HTML код ще се появи, както следва:
Моля, обърнете внимание, че някои от атрибутите могат да се съхраняват във файл от стилове и някои таг DIV. В нашия случай, размерът на ширината на изображението и височината се вмъква в HTML-код.
HTML код на втория метод, без да използвате CSS файл, който е описан в тази статия е, както следва:
В резултат на кодовете на всеки един от двата начина, които получаваме същия резултат - картинката със заоблени ъгли:
Усъвършенстването краища на избраните снимки
Различни радиуси краища на изображението, ширината и цвета на рамката може да бъде получена на нестандартни форми на снимки за страниците на сайта. Ето няколко примера за кодове, чрез които са получили следния много хубаво под формата на снимки.
Линк към изображението и размер можете да вземете в административния панел: Media => Библиотека и в близост до избраната преса изображение: Edit.
В следващата статия ще научите как да използвате получената правоъгълник със заоблени ъгли и рамка за фон на формата за абонамент с помощта на HTML. Можете да получите готови скриптове сладък RSS абонамент форма, които могат да бъдат поставени в страничната лента, в статията, или на друго място в сайта си.
За IE 11 версия поддържа известни езици и версии, въпреки че обещанието на ...
Материалът е много полезно. Благодарим Ви!
Майкъл, можете да създадете плаваща меню с HTML и CSS. За да направите това в header.php файла с етикет
описване на менюто като блоков елемент вид блок се контролира от стилове.
Стилове, описани в файла style.css стил лист, не забравяйте да посочите параметрите:
марж-отгоре - определя вдлъбнатина на горния ръб на елемента;
позиция - определя начина на позициониране елемент по отношение на прозореца на браузъра, или други обекти на уеб страница. Определете стойността на определен;
Z-индекс параметър определя местоположението на плаващ менюто пред всички елементи (горния слой), както и елементи на страницата се поставя в слоя.
Благодарим Ви, че магията :) Не мисля, че всичко е толкова лесно, че ще)
И как да се направи директно с надпис рамки хоризонтална линия, съставен кода си, например.
Като се има предвид, че аз не съм професионален уеб, а не на възрастта (68 години), не е в състояние да овладеят тази задача. Докато почти всичко, което правя в сайта със собствените си ръце.
Вярвам, че това развитие на кода ви ще бъде от полза не само за мен.
Надявам се да помогна.
Яков на рамката не е възможно да се постави текст. Надпис на изображението може да се извърши в рамките на снимката, както следва:
Ние получаваме следните резултати:
Можете да поставите етикет в горната част на изображението. За този таг
поставя в тага