Стыль малюнкаў і выкарыстанне малюнкаў у Стылі
Шматлікія людзі выкарыстоўваюць CSS , каб наладзіць тэкст, змяніць шрыфт, колер, памер і многае іншае. Але адна рэч, што многія людзі часта забываюць аб тым, што вы можаце выкарыстоўваць CSS з выявамі, а таксама.
Змена самога малюнка
CSS дазваляе наладзіць, як малюнак адлюстроўваецца на старонцы. Гэта можа быць вельмі карысна для захоўвання вашых старонак паслядоўныя. Усталяваўшы стылі на ўсе выявы, вы ствараеце стандартны выгляд для вашых малюнкаў. Некаторыя з рэчаў, якія вы можаце зрабіць:
- Дадайце мяжу або контур вакол малюнка
- Выдаліце каляровую рамку вакол звязаных малюнкаў
- Рэгуляванне шырыні і / або вышыні малюнкаў
- дадаць цень
- паварот выявы
- Змена стыляў, калі малюнак завісла над
Даваць малюнак мяжы з'яўляецца выдатным месцам, каб пачаць. Але вы павінны ўлічваць не толькі межаў - думаць пра ўвесь краі вашага малюнка і наладзьце поля і водступы , а таксама. Малюнак з тонкай чорнай аблямоўкай выглядае прыгожа, але дадаўшы некаторыя водступы паміж рамкай і выявай можа выглядаць яшчэ лепш.
IMG {
мяжы: 1px чорнага колеру;
абіўка: 5px;
}
Гэта добрая ідэя , каб заўсёды звязаць недекоративное малюнак , калі гэта магчыма. Але калі вы робіце, памятаеце, што большасць браўзэраў дадаць каляровую рамку вакол малюнка. Нават калі вы выкарыстоўваеце код вышэй, каб змяніць межы, спасылка будзе перавызначыць, калі не выдаліць або змяніць мяжу па спасылцы, а таксама. Для гэтага вам варта выкарыстоўваць правіла CSS дзіцяці, каб выдаліць або змяніць рамку вакол звязаных малюнкаў:
IMG> а {
мяжы: няма;
}
Вы таксама можаце выкарыстоўваць CSS, каб змяніць або ўсталяваць шырыню і вышыню малюнка. Хоць гэта не добрая ідэя выкарыстоўваць браўзэр для рэгулявання памеру малюнка з-за высокай хуткасці загрузкі, яны атрымліваюць значна лепш змена памеру малюнка, так што яны па-ранейшаму добра выглядаць. І з дапамогай CSS вы можаце ўсталяваць малюнка на ўсе быць стандартнай шырыні або вышыні ці нават ўсталяваць памеры, каб быць адносна кантэйнера.
Памятаеце, што пры змене памеру малюнка, для дасягнення найлепшых вынікаў, вы павінны змяніць памер толькі адно вымярэнне - вышыню ці шырыню. Гэта enusre, што выява захоўвае прапорцыі, і таму не выглядае дзіўным. Усталюйце іншае значэнне для аўтаматычнага ці пакінуць яго, каб паведаміць браўзэру, каб захаваць прапорцыі паслядоўныя.
IMG {
шырыня: 50%;
вышыня: аўто;
}
CSS3 прапануе рашэнне гэтай праблемы з аб'ектна-патрэбным новыя ўласцівасці і аб'ектна-пазіцыі. З гэтымі ўласцівасцямі вы зможаце вызначыць дакладную вышыню малюнка і шырыню і, як суадносіны бакоў павінна быць апрацавана. Гэта можа стварыць Letterboxing эфекты вакол вашых малюнкаў або кадравання для атрымання малюнка ў адпаведнасці з памерам патрабаванай.
У той час як CSS3 аб'ектна-патрэбная і аб'ектна-пазіцыйныя ўласцівасці не вельмі шырока падтрымліваюцца, ёсць і іншыя ўласцівасці CSS3, якія добра падтрымліваецца ў большасці сучасных браўзэраў, якія можна выкарыстоўваць для змены малюнка. Такія рэчы, як цені, закругленыя куты, і пераўтварэнні ў паварот, нахіл, або перамясціць вашыя выявы ўсе працы прама цяпер у большасці сучасных браўзэраў. Вы можаце выкарыстоўваць CSS пераходы, каб зрабіць малюнак мяняецца, калі завіс над, ці націснуў, ці толькі пасля пэўнага перыяду часу.
Выкарыстанне малюнкаў у якасці фону
CSS дазваляе лёгка ствараць арнаментальныя застаўкі з вашымі выявамі.
Вы можаце дадаць фон на ўсю старонку або толькі пэўны элемент. Гэта лёгка стварыць фонавы малюнак на старонцы з дапамогай ўласцівасці фонавага малюнка:
цела {
Фонавы малюнак: URL (background.jpg);
}
Змена выбару цела да вызначанага элементу на старонцы, каб паставіць фон толькі на адзін элемент.
Яшчэ адна пацешная рэч, якую вы можаце зрабіць з выявамі, ствараюць фонавы малюнак, якое не пракручваць з астатняй часткай старонкі - як вадзяной знак. Вы проста выкарыстоўваць стыль фонавага ўкладанне: фіксаваны; разам з фонавым малюнкам. Іншыя варыянты для вашых фонавым ўключаюць робяць іх плітку толькі па гарызанталі ці па вертыкалі з дапамогай фонавага паўтору ўласцівасці.
Напісаць фон-паўтарыць: паўтор-х; каб пліткі выявы па гарызанталі і фон паўтор: паўтор-у; забрукаваць па вертыкалі. І вы можаце пазіцыянаваць фонавы малюнак з дапамогай ўласцівасці фону пазіцыі.
І CSS3 дадае дадатковыя стылі для фону, а таксама. Вы можаце расцягнуць малюнак , каб адпавядаць любому фону памеру або ўсталяваць фонавы малюнак для маштабавання з памерам акна . Вы можаце змяніць становішча, а затым абрэзаць фонавы малюнак. Але адна з лепшых рэчаў аб CSS3, што цяпер вы можаце пласт некалькі фонавых малюнкаў для стварэння яшчэ больш складаных эфектаў.
HTML5 дапамагае стыль малюнка
Рыс элемент у HTML5 павінен быць размешчаны вакол любога малюнка, якія могуць стаяць у адзіночку ў межах дакумента. Адзін са спосабаў думаць пра гэта, калі малюнак можа з'явіцца ў дадатку, то ён павінен быць унутры элемента дуль. Вы можаце выкарыстоўваць гэты элемент і элемент FIGCAPTION, каб дадаць стылі да вашых малюнках.