10 полезных инструментов для создания роскошного CSS
vk f t

10 полезных инструментов для создания роскошного CSS

В копил­ку всем, кто дела­ет сай­ты

Что­бы стра­ни­ца выгля­де­ла имен­но так, как заду­ма­но дизай­не­ром, исполь­зу­ют CSS. Но дер­жать в голо­ве все сти­ли и их пара­мет­ры слож­но — их сот­ни. Чаще все­го раз­ра­бот­чик пом­нит самые ходо­вые и попу­ляр­ные, а за осталь­ны­ми обра­ща­ет­ся к спра­воч­ни­кам и спе­ци­аль­ным программам-генераторам. Мы уже писа­ли о CSS, когда доде­лы­ва­ли тек­сто­вый редак­тор и созда­ва­ли соб­ствен­ный тай­мер

Гене­ра­тор CSS-свойств — про­грам­ма или сер­вис, кото­рые поз­во­ля­ют визу­аль­но настро­ить нуж­ные пара­мет­ры тек­ста или всей стра­ни­цы, а потом полу­чить уже гото­вый CSS-код для встав­ки на сайт.

CSS Type Set

csstypeset.com

Сер­вис помо­га­ет быст­ро полу­чить нуж­ный код оформ­ле­ния тек­ста. Он не уме­ет обра­ба­ты­вать отдель­ные сло­ва, поэто­му при­ме­ня­ет настрой­ки ко все­му абза­цу. Из полез­но­го — вы сра­зу види­те резуль­тат и може­те менять все настрой­ки на ходу. Сле­ва текст, спра­ва — код, кото­рый отве­ча­ет за внеш­ний вид тек­ста. Его мож­но ско­пи­ро­вать и вста­вить на свою стра­ни­цу.


Px to Em calculator

omnicalculator.com/conversion/px-to-em

Если вы реши­те фана­тич­но подой­ти к сай­ту с авто­мас­шта­би­ро­ва­ни­ем и про­сто­го Бут­стра­па вам будет недо­ста­точ­но, посмот­ри­те на этот сер­вис. Он возь­мёт раз­ме­ры ваших объ­ек­тов в пик­се­лях или пунк­тах и пере­ве­дёт их в эмы, кото­рые зави­сят толь­ко от шири­ны и высо­ты окна бра­у­зе­ра. Или наобо­рот — эмы в пунк­ты. Огра­ни­че­ний нет, мас­шта­би­ро­вать мож­но что угод­но.


CSS Menu Maker

cssmenumaker.com

Теперь, что­бы сде­лать любое меню на сайт, доста­точ­но открыть этот гене­ра­тор — всё осталь­ное он сде­ла­ет за вас. Выби­ра­е­те, како­го типа меню вам нуж­но, настра­и­ва­е­те цве­та и вло­жен­ные пунк­ты — и гото­во. Вам оста­нет­ся толь­ко вста­вить код на сайт и про­ста­вить ссыл­ки из меню на нуж­ные стра­ни­цы.


CSS Gradient

cssgradient.io

Если вы люби­те гра­ди­ен­ты, посмот­ри­те на этот сайт. Он помо­жет сде­лать гра­ди­ент любой слож­но­сти и из любых цве­тов. Сами цве­та мож­но настро­ить пол­зун­ка­ми и слай­де­ра­ми или вве­сти их шест­на­дца­те­рич­ные зна­че­ния. Очень зали­па­тель­ная шту­ка, даже если она вам ни разу не при­го­дит­ся.


Color Palette Generator

www.cssdrive.com/imagepalette

Ино­гда нуж­но сде­лать весь сайт в одной палит­ре, что­бы все цве­та соче­та­лись друг с дру­гом или с кар­тин­ка­ми. Мож­но все цве­та под­би­рать вруч­ную, а мож­но зай­ти на этот сайт, загру­зить нуж­ную кар­тин­ку, а сер­вис сам раз­ло­жит её на цве­та и пред­ло­жит вам несколь­ко палитр на выбор. Резуль­тат рабо­ты мож­но сохра­нить как CSS-файл или ско­пи­ро­вать зна­че­ния цве­тов вруч­ную.


CSS Scheme Designer

colorschemedesigner.com/csd-3.5

Похо­жий сер­вис, кото­рый под­би­ра­ет палит­ру для ваше­го сай­те на осно­ве одно­го базо­во­го цве­та. В сер­ви­се есть выбор, какая палит­ра вам нуж­на, сколь­ко долж­но быть акцент­ных и допол­ни­тель­ных цве­тов и так далее. Если ваша зада­ча — най­ти цве­та для сай­та, кото­рые соче­та­ют­ся меж­ду собой, то нач­ни­те с CSS Scheme Designer.


Box Shadow

cssmatic.com/box-shadow

Мы уже исполь­зо­ва­ли этот сер­вис в ста­тье про тек­сто­вый редак­тор, что­бы сде­лать кра­си­вую тень. Соб­ствен­но, это всё, что уме­ет делать сер­вис — гене­ри­ро­вать кра­си­вую тень для объ­ек­та. Мож­но настро­ить тень как угод­но: угол осве­ще­ния, рас­сто­я­ние до фона, раз­мы­тость и цве­та и даже про­зрач­ность.


Border Radius

cssmatic.com/border-radius

Скруг­ля­ет углы пря­мо­уголь­ни­ков. Это всё, что о нём мож­но ска­зать. 


CSS Animation Generator

coveloping.com/tools/css-animation-generator

У CSS хоро­шие встро­ен­ные инстру­мен­ты ани­ма­ции. Бра­у­зер рису­ет ани­ма­цию на CSS доволь­но быст­ро и не загру­жая про­цес­сор. Это гораз­до эффек­тив­нее, чем горо­дить ани­ма­цию с помо­щью JavaScript.

С помо­щью это­го сер­ви­са мож­но доба­вить ани­ма­цию к любо­му эле­мен­ту на стра­ни­це. При жела­нии мож­но поста­вить галоч­ку бес­ко­неч­ной ани­ма­ции, тогда блок ста­нет появ­лять­ся, исче­зать, а потом появ­лять­ся сно­ва — мож­но, напри­мер, сде­лать дзен-игру про зар­пла­ту.


CSS Filters

cssfilters.co

Сер­вис дела­ет то же самое, что и филь­тры в фото­ре­дак­то­ре — улуч­ша­ет вашу кар­тин­ку, остав­ляя ори­ги­нал нетро­ну­тым. Ника­кой магии, толь­ко чистый CSS. Если не хва­та­ет встро­ен­ных пре­се­тов, все­гда мож­но поиг­рать пол­зун­ка­ми и полу­чить нуж­ный резуль­тат.


Бонус

CSS — это не толь­ко про под­бор цве­тов, ани­ма­цию и настрой­ку тек­ста. Вот что ещё мож­но сде­лать на чистом CSS:

Изу­чай­те CSS и делай­те свои сай­ты кра­си­вы­ми, необыч­ны­ми и удоб­ны­ми!

Ещё по теме