5 возможностей в CSS улучшающих верстку

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

Простые рекомендации

Рекомендую обучиться их использовать в работе, ведь SCSS предлагает не только более простую структуру, но и много других полезных вещей таких как переменные, миксины, и многие другие вещи.

Кстати для компиляции scss я использую программу Prepros, которая позволяет мне компилировать scss, проставлять автопрефиксы, а они в свою очередь задают стили отдельным браузерам для полной поддержки. Ранее можно было с помощью префиксов задавать стили отдельным браузерам, таким как Explorer, он всегда был достаточно глупым браузером потому для него требовалось отдельное внимание.

Кроме того, некоторые браузеры поддерживают не все стили, но прописывать префиксы достаточно нудное дело, так как нужно учитывать сразу несколько браузеров. А вот если в компиляторе работает функция «автопрефикс» то разработка становится значительно проще и быстрее.

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

Обрезка картинки с помощью clip

Кстати и не только картинки, так же можно обрезать целый текстовый блок. С помощью свойства clip можно определить область позиционированного элемента в которой будет отображено его содержимое. Грубо говоря мы выделяем область, которая будет показана для пользователя, а все остальное будет скрыто от его глаз.

Стоит отметить, что данное свойство работает только с теми элементами у которых задано свойство position absolute” либо „fixed”.

Свойство clip имеет следующий синтаксис:

img {
position:absolute;
clip:rect(0px,60px,200px,0px);
}

Так же хочу привести пример который показывает, как работает данное свойство:

«Никто не использует border-image» в CSS

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

Но бывают и другие случаи, когда нужно что-то обвернуть картинкой. Допустим мы пишем программу, которая будет мерять картины на фоне вашей комнаты – там мы берём картинку вставляем туда внутрь еще одну картинку ну а после обрамляем его своим border-image с рамочкой от картины.

Синтаксис:

border-image: url(border.png) 50 round;

Пример:

Scrollbar без фрейма

Раньше для того чтобы область в экране имела возможность прокрутки, делали так называемый фрейм. Фрейм — это когда один файл объединял в себе несколько отдельных html файлов, которые по факту отображались как два-три разных файла, но могли служить как дополнение для друг друга.

Самый простой пример этому это меню сайд бар и контент часть. В меню мы сохраняли самые разные ссылки, а вот контент отображал то, что пользователь хотел видеть. Вот там мы и получали тот окно фрейма, в котором был собственный scrollbar.

Но от фреймов отказались не просто так, а все из-за их не адаптивности, да и в целом это бесполезная штука.

Сегодня контент можно вставить с помощью технологии ajax и сделать это более качественно. Так вот, к чему я это.

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

Проще говоря, делается это так:

div.frame {
border:   1px solid;
width:    300px;
height:   300px;
overflow: auto;
}

По коду мы видим, что сначала мы задали границы (кубик 300х300), после задали border, который отображает нам наш кубик, ну а потом задали свойство overflow: auto, которое позволяет просмотреть все содержимое внутри ограниченного элемента.

Псевдоэлементы (::after, ::before)

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

У меня даже появилась идея создать отдельную статью на тему псевдоэлементов, потому в скором времени я ее выпущу. Ну а пока хочу разобрать несколько следующих:

  • ::after – добавляет стиль внутри тега после вывода содержимого;
  • ::before – добавляет стили внутри тега до вывода содержимого;

Я создал простенький и яркий пример который отображает то как нужно применять эти два псевдоэлемента.

CSS счётчики

Мне частенько приходилось создавать какие-то интересные штуки во время работы. Одна из них — это подсчет выбранных элементов пользователем. Но ранее я делал это только с помощью JavaScript или PHP, а все потому, что я не видел другого способа.

Время шло, а я учился и узнал о таких свойствах как:

counter-increment: element;
content: counter(element);

То есть первый задает какие пункты считать, а второй выводит его на дисплей. В целом очень просто и очень круто.

Я даже запилил крутой пример который даже задет какую-то интерактивность:

Если этого примера тебе мало, могу показать тебе еще один из официальных источников по css, там кстати сделано очень доходчиво!

На этом все, но если тебе понравилась эта статья и ты бы хотел еще таких крутых фишек, которые я имею в своем портфеле целую пачку, то дай мне об этом знать, и с делают еще одну порцию полезности. Кроме того, если я тебе помог, то не забудь поделиться этой статье в социалках, либо просто не забудь сохранить этот линк – кто знает, может он пригодится тебе!

Оставьте комментарий