Css фишки – Интересные CSS трюки, которые помогут разнообразить создание макетов: советы по использованию

Различные полезные фишки на HTML и CSS бесплатно

Приветствую, друзья. Если Вы в поисках самых полезных вещей для дизайнера, тогда Вы попали туда куда нужно. Здесь Вы сможете совершенно бесплатно скачать несколько кнопок, разнообразных форм, модальных окон, таблиц, и ещё нескольких классных вещей уже свёрстанных в HTML и  CSS. Их только нужно скачать и использовать на сайте.

Так же рекомендую к просмотру следующее:

• Множество крутой халявы для дизайнера за сентябрь 2014
• Шаблоны, макеты, иконки и ещё множество очередной халявы для дизайнера
• Бесплатные UI исходники Android разных версий
• Меню, галереи и ещё несколько клёвых jQuery плагинов
• Различные фишки для дизайнера за сентябрь и август 2014

Кнопки войти на CSS

Демо Ι Скачать

Красивая регистрационная форма на HTML

Демо Ι Скачать

Таблица с ценами на сайт

Демо Ι Скачать

Красивые выключатели на HTML и CSS

Демо Ι Скачать

Кнопки скачать на CSS3

Демо Ι Скачать

Классный лист с задачами

Демо Ι Скачать

Тёмная корзина для интернет магазина на HTML

Демо Ι Скачать

Простая форма входа на CSS

Демо Ι Скачать

Простой виджет с табами

Демо Ι Скачать

Тёмные кнопки на CSS

Демо Ι Скачать

Тёмный календарь для сайта бесплатно

Демо Ι Скачать

Стильные часы

Демо Ι Скачать

Стеклянные и разноцветные кнопки на CSS

Демо Ι Скачать

Таблицы с ценниками

Демо Ι Скачать

Социальные кнопки

Демо Ι Скачать

Форма входа в стиле Facebook на CSS и HTML

Демо Ι Скачать

Металлический прогресс бар

Демо Ι Скачать

Форма контактов в модальном окне

Демо Ι Скачать

Навигация с уведомлениями на CSS

Демо Ι Скачать

Красивый блокнот

Демо Ι Скачать

Красивые окна уведомлений

Демо Ι Скачать

Аналитический виджет в тёмном оформлении

Демо Ι Скачать 

Разноцветные и красивые кнопки на CSS

Демо Ι Скачать

Тёмная навигация по страницам на сайт

Демо Ι Скачать

Тёмный и светлый выпадающие списки

Демо Ι Скачать

Кнопки поделиться в социальных сетях

Демо Ι Скачать

Панель с настройками

Демо Ι Скачать

Тёмный калькулятор

Демо Ι Скачать

Бумажный блокнот

Демо Ι Скачать

Окно с загрузкой файла

Демо Ι Скачать

20 потрясающих CSS3 техник, библиотек и примеров

В этом списке мы собрали для вас лучшие ресурсы с примерами CSS3 техник, а также  демо-сайты различных разработчиков, раскрывающие се богатство CSS.

В список также включены англоязычные статьи, обрисовывающие новые фичи в CSS3 и несколько полезных библиотек, наполненных разными фишками.

Для полного эффекта от просмотра ссылок из данной статьи рекомендуем пользоваться последней версией современного браузера, например, хромом.

Прекрасно исполненная версия меню на чистом CSS. На самом деле здесь представлено целых семь разных вариантов, в каждом из которых используются новые функции перехода в CSS3 и с умом применяются селекторы для создания безупречного эффекта размытия. Посмотреть на код можно здесь.

На этом демо-сайте можно сгенерировать крайне реалистичные облака и даже поиграть с ними. Демо-код достаточно сложный, поскольку использует 3D-Transform функции CSS3 и JavaScript. Подробную инструкцию на английском можно прочитать здесь.

Здесь собраны логотипы известных компаний: изготавливались логотипы хардкорно, только с помощью CSS. При наведении мышкой на лого вы увидите, какие именно CSS-свойства использовались для создания изображений. На github можно посмотреть полный код.

Ещё один пример творческого подхода к CSS. Каждый пост этого tumblr-журнала представляет собой анимированную букву алфавита, оживающую с помощью CSS.

Простая, но стильная панель навигации. Её CSS-код состоит всего из 65 строк, но это не мешает ей оставаться эффектной. Глубина пространства создаётся опять же за счёт новых функций перехода и трансформации в CSS3.

Это CSS-версия простой Google Doodle анимации. Выполнена очень аккуратно, работает быстро, и никакого JavaScript!

Ещё один классный проект, посвящённый слайдерам для изображений. Он тоже работает как часы, не содержит ни капли JavaScript. Проект состоит из четырёх разных вариантов реализации и учебника. Руководство на английском можно почитать здесь.

Славное анимированное колечко, выполненное с помощью одного-единственного div-элемента и менее сотни строк CSS-кода.

Очередная демонстрация использования последних функций CSS3 — переходов, фильтров, 3D-трансформаций и проч. Сама по себе демонстрация не очень впечатляет, но вы только подумайте, сколько классного можно сделать, добавив ещё пару слоёв.

А вот несколько полезных статей и руководств о новых функциях CSS3.

Подробная статья о новых “гибких” контейнерах (так называемых “флексбоксах” — flexbox). Флексбоксы — это новый способ вёрстки страниц в CSS. Это удобное средство для изменения ширины, высоты и расположения HTML-элементов на странице. Если лень читать на английском много, можно прочесть краткую шпаргалку.

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

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

Одна из лучших статей в мире о CSS. В ней представлены CSS-формы и множество примеров того, как их создавать и использовать. Читать немедленно.

В этом руководстве авторы объясняют, как создать простые индикаторы выполнения процесса без использования сложных скриптов. Градиенты, полоски, эффектные отблески: вот это всё сделано с помощью CSS3-техник. Конечный результат выглядит безупречно.

Очень популярный на github проект. И не зря! Всё выполнено на CSS и значительно повышает производительность веб-проекта.

Spinkit — это коллекция настраиваемых индикаторов загрузки. А индикаторы загрузки нужны всем.

Что же вы увидите, перейдя по ссылке? Большую коллекцию кнопок.

Классное приложение, которое позволяет настроить кнопки-“выключатели” под себя и скопировать полученный CSS-код. А ещё там есть кнопки-“выключатели”, используемые в популярных ОС.

СSS-библиотека подсказок для сайта, не требующих JavaScript.

Проект Colors.css нужен для тех, кто ненавидит подборку hex-кодов цветов. Это приятная альтернатива встроенному цветовому редактору.

Итак, надеемся, эти примеры и советы вдохновят вас на создание интересных и удобных CSS-поделок!

12 малоизвестных фактов о CSS / Habr

Предлагаю читателям «Хабрахабра» перевод статьи «12 Little-Known CSS Facts (The Sequel)». Она совсем недавно была упомянута в дайджесте интересных материалов из мира веб-разработки и IT.

Update: немного «шлифанул» перевод напильником. Выражаю благодарность всем неравнодушным читателям.
Внимание! Под катом почти 1.5 Мб картинок и много интересных ссылок.

Итак, начнём-с…

1. В свойстве border-radius можно использовать slash-синтаксис.

Об этом уже писалось 4 года назад, но многие новички и даже некоторые опытные разработчики не знают о существовании этой «фишки».

Верите или нет, но следующий код валиден:

.box {
  border-radius: 35px 25px 30px 20px / 35px 25px 15px 30px;
}

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

Если значения указаны и «до», и «после» слеша, то значения «до» устанавливают горизонтальный радиус, а значения «после» « вертикальный.
Если slash отсутствует, то значения обоих радиусов считаются одинаковыми.

В спецификации также приводится следующая диаграмма:

Использование slash-а при указании значений позволит вам создавать несимметричные скругленные углы. Если хотите более подробно изучить эту тему, то почитайте указанную выше статью или, даже лучше, попробуйте интерактивное демо от MDN.

Большинство генераторов border-radius-ов не позволяют устанавливать дополнительные значения. Из всех найденных таких генераторов только MDN-овский это умеет.

2. Свойство font-weight может принимать «относительные» значения.

Чаще всего свойство font-weight принимает значение normal или bold. Иногда встречаются и целочисленные значения, кратные ста, такие как 100, 200 и т.д. до 900.

Но два возможных значения часто забывают — bolder и lighter.

Согласно спецификации, эти ключевые слова устанавливают шрифта жирнее или тоньше по сравнению с унаследованным. Такая возможность работы с отображением текста важна, если используемый шрифт имеет несколько вариантов «веса», а не только «жирный» и «нормальный».

В значениях веса, кратным ста, «жирный» равен 700, а «нормальный» — 400. Таким образом, если вы хотите установить вес в 300, то значение lighter, примененное к тексту, который унаследовал нормальный вес 400, установит как раз нужный вес. Если более «легкого» варианта шрифта нет (т.е. 400 — самый тонкий вариант шрифта), то те же 400 и останется, и от использования lighter

эффекта не будет.

В примере используется шрифт Exo 2, который имеет 18 различных стилей, но из них нужны только некурсивные варианты шрифта — этого достаточно для всех числовых весовых значений.

В демке используется 12 вложенных box-элементов с различными значениями font-weight включая bolder и lighter, так что эффект от применения этих ключевых слов очевиден. Ниже приведены использованные стили. Обратите внимание на комментарии в коде и учтите, что каждый следующий элемент находится внутри предыдущего.

Много css-кода из демки

.box {
  font-weight: 100;
}
 
.box-2 {
  font-weight: bolder; /* maps to 400 */
}
 
.box-3 {
  font-weight: bolder; /* maps to 700 */
}
 
.box-4 {
  font-weight: 400;
}
 
.box-5 {
  font-weight: bolder; /* maps to 700 */
}
 
.box-6 {
  font-weight: bolder; /* maps to 900 */
}
 
.box-7 {
  font-weight: 700;
}
 
.box-8 {
  font-weight: bolder; /* maps to 900 */
}
 
.box-9 {
  font-weight: bolder; /* maps to 900 */
}
 
.box-10 {
  font-weight: lighter; /* maps to 700 */
}
 
.box-11 {
  font-weight: lighter; /* maps to 400 */
}
 
.box-12 {
  font-weight: lighter; /* maps to 100 */
}
 

В данном примере bolder и lighter, в конечном итоге, устанавливают следующие значения веса: 100, 400, 700 и 900. С девятью различными css-стилями при использовании этих ключевых слов не получится добиться значений 200, 300, 500, 600 и 800.

Это происходит из-за того, что вы указываете браузеру выбрать следующий вариант шрифта, который «жирнее» или «легче». А браузер выбирает не просто «следующий более жирный» или «следующий более тонкий» вариант, а «жирный» и «легкий» по отношению к текущему унаследованному варианту. Но, если самый «легкий» вариант шрифта имеет вес 300, например, как у Open Sans, а унаследованное значение равнялось 400, то при использовании «lighter» получится 300.

Такое поведение может сбивать с толку, но если вы «поиграетесь» с демо-примером, то всё встанет на свои места.

3. Существует свойство outline-offset

Свойство outline довольно широко известно из-за использования при дебагинге (из-за него страница не «расползается»). В спецификации, однако, добавлено свойство outline-offset, которые делает ровно то, что и означает — указывает сдвиг внешней границы от элемента.

В демо при изменении положения ползунка меняется и величина сдвига границы. В примере указаны значения от 0px до 30px, но вы можете изменить пределы на своё усмотрение. Обратите внимание, на то, что свойство outline — сокращенное свойство и не включает в себя outline-offset и его придется указывать отдельно.

Главным недостатком свойства outline-offset является тот факт, что оно поддерживается всеми браузерами кроме Internet Explorer (даже в IE 11 его нет).

4. Существует свойство table-layout

Не стоит путать это свойство с display: table.
Т.к. table-layout — не самая простая «фишка» CSS для понимания, давайте сначала обратимся к спецификации, а потом посмотрим на демо:

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

Возможно, это первый раз в истории спецификации W3C, когда что-то так сложно понять.

Но, если серьёзно, использование демо поможет.

В приведенном примере видно преимущество использования значения fixed для table-layout по сравнению со значением auto. Использование такого подхода не панацея, но всегда неплохо знать о такой возможности при использовании таблиц с ячейками различной ширины.

Chris Coyier написал замечательную статью об использовании длинных строк в таблицах в прошлом году, в которой данная тема раскрывается очень хорошо.

5. Свойство vertical-align работает по разному в ячейках таблиц и других элементах

Если вы занимаетесь разработкой сайтов с середины двухтысячных или раньше или знаете достаточно много о HTML и email-письмах, то вы, возможно, предполагаете, что свойство vertical-align является обычным улучшением старого HTML4-аттрибута valign, который сайчас указан как устаревший и несоответствующий стандарту HTML5.
Но свойство vertical-align в CSS работает не совсем так. Но не в таблицах. Что, по-моему, достаточно странно, но я полагаю, это лучше, чем свойство, вообще не работающее в таблицах.

Итак, какова разница при использовании этого свойства в обычных элементах и ячейках таблиц?

Если vertical-align применяется НЕ к ячейкам таблиц, то оно работает по следующим правилам:

• Применимо только к inline или inline-block элементам;
• Не влияет на содержимое элемента, а только меняет его положение относительно других inline и inline-block элементов
• На свойсто могут влиять настройки текста или шрифта, такие как line-height и размер смежных inline и inline-block элементов.

Демо.

Свойство vertical-align установлено у поля ввода input. При нажатии на кнопки значение свойства меняется. Обратите внимание, что все эти значения различны.
Примите во внимание, что данная демка — лишь поверхностный взгляд на vertical-align. Более глубокое его рассмотрение можно изучить тут.

Когда vertical-align применяется к ячейке таблицы, то оно работает совсем по-другому. В частности, данное свойство применяется и к содержимому ячеек.
Демо.

Как показано в примере, для vertical-align есть только 4 варианта значения, которые применимы к ячейкам таблицы, кроме того значение baseline влияет и на ячейки того же уровня, что и ячейка, к которой свойство применено.

6. Псевдо-элемент ::first-letter умнее, чем вы думаете

Псевдо-элемент ::first-letter позволяет вам стилизовать первую букву элемент (примечание переводчика — привет, капитан!), например, красиво выделить её как в печатных книгах много лет назад.

Браузеры достаточно хорошо поддерживают стандарт относительно этой «первой буквы». Впервые этот псевдо-элемент я увидел в твите Matt Andrews, хотя он явно подразуемевает, что это всё таки плохая «фишка». Демо.

Это здорово, что 4 крупных браузера отображают этот псевдо-элемент одинаково, потому что, по-моему, это и есть правильный вариант отображения. Выглядело бы странным, если бы какой-нибудь символ, такой как одиночная скобочка, воспринимался как «первая буква» — это скорее можно было бы считать «первым символом», который достоин собственного нового псевдо-класса.

7. Вы можете использовать «невалидные» символы в качестве разделителей в перечне классов элемента

Этот подход обсуждал Ben Edvard в 2013 году, и, я думаю, стоит подробнее рассмотреть этот вопрос.
Ben писал об использование slash («/») в качестве разделителя HTML-классов по группам для того, чтобы сделать код более читаемым и проще сканируемым. Автор указывает, что несмотря на то, что неэкранированный slash является «невалидным» символом, браузеры его просто игнорируют, а не выдадут ошибку.
Допустим, у вас такой HTML-код:

<div>

При использовании slash-ей получается следующее:

<div>

Вы можете использовать любой символ (валидный или не очень) для получения того же эффекта:

<div>
<div>
<div>

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

./ {
  color: blue;
}

Если вы вынуждены использовать подобные символы в названиях своих css-классов, то можно использовать вот этот инструмент. Таким образом, вышеуказанный код будет работать, если его преобразовать до такого:

.\/ {
  color: blue;
}

Если продолжать эту тему, то Unicode-символы вообще не должны быть экранированы и можно творить разные безумные вещи:

. {
  color: hotpink;
}
 
.★ {
  color: yellow;
}

  <div></div>

Кроме того, вы можете «экранировать» и эти символы тоже, вместо того чтобы использовать их напрямую. Следующие css-строки аналогичны предыдущим:

.\2665 {
  color: hotpink;
}
 
.\2605 {
  color: yellow;
}

8. Количество повторов анимации может принимать дробные значения

При описании анимации можно использовать свойство animation-itereation-count для того, чтобы указать, какое количество раз анимация будет проиграна:

.example {
  animation-iteration-count: 3;
}

Вышеуказанный код говорит, что анимация будет проигрываться 3 раза. Но, возможно, вы не знали, что можно указывать и дробные значения:

.example {
  animation-iteration-count: .5;
}

В этом случае анимация будет проиграна лишь на половину первой итерации. В демо на CodePen верхнему кружку указано количество итераций 1, а нижнему — .5

Длительность итерации определяется не по изменению значений свойств во течение анимации, а именно по времени и с учетом сглаживания. В вышеупомянутом примере используется функция с линейной зависимостью от времени — linear.

Но в этом примере уже применяется сглаживание:

Обратите внимание на то, что второй кружок прошел больше половины пути до остановки из-за другой временной функции.

Если вы разбираетесь в различных функциях сглаживания, то заметите, что при использовании ease-in-out второй кружок займет то же итоговое положение, что и при использовании linear.

9. Анимация, записанная в краткой форме может не работать из-за своего названия

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

@keyframes reverse {
  from {
      left: 0;
    }
 
    to {
      left: 300px;
    }
}
 
.example {
    animation: reverse 2s 1s;
}

Заметьте, я использую название анимаци reverse. На первый взгляд, всё хорошо, но давайте посмотрим на живой пример.

Анимация не работает, т.к. reverse — валидное ключевое слово для свойства animation-direction. Так же анимация не будет работать при использовании в краткой форме в названии других ключевых слов. Но всё работает хорошо при использовании «полной» формы описания.

К ключевым словам-значениям animation-direction, «ломающими» анимации, стоит отнести и ключевые слова, относящиеся к функциям сглаживания, а так же infinite, alternate, running, paused и так далее.

10. В селекторе можно указать диапазон элементов.

Не знаю, кто начал это первым использовать, но первым я увидел это демо от Gunnar Bittersmann. Допустим, у вас есть список из 20 элементов и нужно выбрать элементы с 7 по 14 включительно. Это можно сделать вот так:

ol li:nth-child(n+7):nth-child(-n+14) {
  background: lightpink;
}

Демо.

В Safari из-за бага такой приём работать не будет. Однако, решение всё таки есть — Matt Pomaski починил это. Нужно всего лишь перечислить элементы выборки в другом порядке:

ol li:nth-child(-n+14):nth-child(n+7) {
  background: lightpink;
}

Этот код использует цепочку связанных псевдо-классов. Хотя выражение немного запутанное, ключевые числа 7 и 14 в нём используются без изменений.
Постараюсь объяснить, как это работает. Первая часть выражения говорит: «выбрать седьмой элемент, а потом все ПОСЛЕ него». А вторая часть — «выбрать четырнадцатый элемент, а потом все ДО него». Т.к. части связаны, то на пересечении запросов получается требуемый диапазон.

Для более детального рассмотрения этой темы рекомендуется почитать более раннюю статью.

11. Псевдо-элементы могут быть применены к некоторым «пустым» элементам

Наверняка вы пробовали использовать псевдо-элементы с изображениями или input-ами. Но это не работает с «замещаемыми» элементами (примечание переводчика — в комментариях к этому переводу SelenIT2 постарался объяснить, что же это за зверь такой). Я думаю, многие разработчики предполагают, что пустые элементы (те, у которых нет закрывающего тега) так же попадают в эту категорию. Но это не так.

Вы можете использовать псевдо-элементы вместе с некторыми пустыми элементами, которые не являются «замещаемыми». Например, <hr> в этом демо.

Цветная область является тегом <hr> и его двумя псевдо-элементами ::before и ::after. Интересно, что подобного результата не получилось добиться от тега <br>, который тоже не является «замещаемым».

Так же, вы можете использовать псевдо-элементы вместе с мета-тегами или <link>, если, конечно, готовы применить к ним свойство display: block как в этом демо.

12. Некоторые значения атрибутов регистро-зависимы при использовании в селекторах

Наконец-то, что-то непонятное. Допустим, есть такой HTML:

<div></div>
<input type="email">

Можно стилизовать оба этих элемента следующим образом:

div[class="box"] {
  color: blue;
}
 
input[type="email"] {
  border: solid 1px red;
}

Это замечательно работает. А как на счёт такого?

div[class="BOX"] {
  color: blue;
}
 
input[type="EMAIL"] {
  border: solid 1px red;
}

Значения обоих атрибутов написаны в верхнем регистре. В этом случае .box-элемент не получит стилизации, т.к. атрибут class регистрозависим. Поле ввода email, однако, будет стилизовано, т.к. аттрибут type регистронезависим. В этом нет ничего новаторского, но, возможно, вы это не замечали раньше.

Полезные фишки CSS. Пояснения некоторых стилей —

• Главная
• Услуги по веб-сайту
  • Работы по сайту
    • Cоздание | запускНаписание технического задания, разработка и тестирование
    • Поддержка | редактированиеВедение и сопровождение, исправление ошибок и сбоев
    • Анализ | продвижениеАнализ, улучшение и оптимизация, реклама и раскрутка
  • Заказать работу
    • Заказать создание сайтаФорма заказа на разработку сайта
    • Заказать обслуживаниеФорма заказа на ведение, исправление, поддержку сайта сайта
    • Заказать продвижениеФорма заказа по анализу и продвижению сайта
  • Тарифы и цены на работы
    • Тарифы, цены и срокиГотовые тарифы на разработку, сопровождение и продвижение сайта. Сроки и перечень работ
    • Рассчитать стоимостьУдобная форма-калькулятор для расчёта стоимости создания сайта под ключ
  • Komp-Msk
    • Наше портфолиоКлиенты, которым мы создали/продвинули сайт
    • Гарантия на работыПо веб-сайту. Создание. Поддержка. Продвижение
• Компьютерная помощь
  • Проблемы и их решения
    • Компьютеры и ноутбукиДиагностика, ремонт, настройка, сборка, чистка
    • Вирусы | ПрограммыУдаление вирусов. Установка, настройка Windows и программ. Настройка интернета и сети
  • Абонентское обслуживание | Удаленная помощь через интернет
    • Поддержка и обслуживание пользователейДистанционные и профилактические работы. Удаленное решение проблем
  • Цены | Оставить заявку
    • Вызвать мастераОтправить нам заявку
    • Цены и тарифыЦены на компьютерную помощь на дому, удаленно, тарифы на обслуживание
  • Komp-Msk
    • Как мы работаем. О Komp-MskВсе услуги. Коротко о нас. Чем мы Вам поможем.
    • Гарантия на работыПо ремонту и настройке компьютера
• Услуги дизайнера
  • Разработка дизайна, стиля
    • Дизайн полиграфииРазработка макетов логотипа, визитки, баннера, этикетки, буклета, листовки
  • Услуги фотографа, обработка фото и видео
    • Работа фотографа. Монтаж видеоСъемка и обработка фотографий. Создание и редактирование видеороликов
  • Цены | Оставить заявку
    • Цены на все услугиПрайс на работы дизайнера полиграфии, фотографа, видеомонтаж
    • ПортфолиоНекоторые наши работы
• Статьи и работы
  • Все содержимоеЛента статей. Главная страница с рубриками
    • Веб-сайтыВеб-сервер и хостинг. Системы управления сайтами. Домены. Верстка. Модули.
    • Ремонт и настройка компьютеровОшибки, неисправности, варианты решений. Настройка программ
    • Дизайн и внешний видГрафические редакторы. Сервисы. Цвета, фоны, картинки, иконки
  • Разное
    • Трудовые будни IT-мастераНекоторые примеры повседневных работ.
    • Играть в 2048Побъете наш рекорд?
    • Смешные заявки по ремонту компьютеровНекоторые слова и фразы, которые я услышал настраивая и ремонтируя компьютеры, добавляйте свои
• Контакты
  • О насОсобенности работы и отличия от других компаний. Преимущества
  • Контакты и обратная связьРежим работы. Как с нами связаться. Отправить сообщение

• 7-(977)-896-96-26
• Прием звонков ежедневно с 10:00 до 20:00

• [email protected]
• Прием онлайн заказов ежедневно с 9:00 до 21:00

Menu
• Главная
• Услуги по веб-сайту
  • • Работы по сайту
      • Cоздание | запуск – Написание технического задания, разработка и тестирование
      • Поддержка | редактирование – Ведение и сопровождение, исправление ошибок и сбоев
      • Анализ | продвижение – Анализ, улучшение и оптимизация, реклама и раскрутка
  • • Заказать работу
      • Заказать создание сайта – Форма заказа на разработку сайта
      • Заказать обслуживание – Форма заказа на ведение, исправление, поддержку сайта сайта
      • Заказать продвижение – Форма заказа по анализу и продвижению сайта
  • • Тарифы и цены на работы
      • Тарифы, цены и сроки – Готовые тарифы на разработку, сопровождение и продвижение сайта. Сроки и перечень работ
      • Рассчитать стоимость – Удобная форма-калькулятор для расчёта стоимости создания сайта под ключ
  • • Komp-Msk
      • Наше портфолио – Клиенты, которым мы создали/продвинули сайт
      • Гарантия на работы – По веб-сайту. Создание. Поддержка. Продвижение
  • Close
• Компьютерная помощь
  • • Проблемы и их решения
      • Компьютеры и ноутбуки – Диагностика, ремонт, настройка, сборка, чистка
      • Вирусы | Программы – Удаление вирусов. Устано

20 впечатляющих CSS3 примеров, техник и библиотек

В данной подборке собраны самые лучшие и качественные CSS фишки. Тут  Вы сможете встретить различные и удивительные демо примеры и техники от знаменитых верстальщиков и дизайнеров, которые стараются доказать, что сейчас возможно сделать практически всё только на чистом CSS. Так же Вы тут сможете встретить несколько уроков в которых подробно рассказывается как сделать подобное творение. Надеюсь, что эта подборка окажется Вам полезной.

Спасибо http://tutorialzine.com и рекомендую:

Размытое меню

Это действительно красивое и качественно выполненное меню на чистом CSS. Правильный и удачный пример использования новых технологий CSS.

Демо Ι Скачать

CSS 3D облака

В этом демо Вы сможете создавать и редактировать причудливые облака в 3D. Данные облака на CSS дают понять нам, что возможности веб технологий практически безграничны.

Перейти

Логотипы на чистом CSS

Это примеры логотипов сделанных только на чистом CSS. Вы только вдумайтесь, при создании не использовались изображения. Это просто нечто.

Перейти

Алфавит с CSS анимацией

Отличный и художественный пример использования CSS в алфавите

Перейти

3D навигация для сайта

Простая но очень стильная панель навигации для сайта, конечно же сделанная с помощью только CSS3. никаких изображений и скриптов.

Перейти

Дудл от Google на CSS

Один из многочисленных дудлов от поисковика Google, сделанный на CSS. Это отличный пример качественного использования CSS анимации

Перейти

Слайдер

Хорошо и качественно сделанный слайдер для картинок. Плюс 4 примера в демо.

Перейти

Двойное анимированное кольцо

Красивое оанимационное и разноцветное кольцо с не сильно большим кодом CSS

Перейти

Размытие на CSS

Мне кажется очень нужный фильтр, тем более он сделан на чистом CSS. с помощью размытия можно привлечь внимание пользователя к определённой точке.

Перейти

Полное руководство по Flexbox

Данная статья о адаптивных блоках Flexbox. В ней рассказывается полностью о данных блоках, правда статья на Английском.

Перейти

Красочное и анимированное меню на CSS3

Красивое выпадающее меню для сайта с иконками. Огромным плюсом является то, что оно сделано полностью на CSS.

Перейти

CSS фильтры

Качественный материал на Английском, в котором рассказывается о применении CSS фильтров на изображения.

Перейти

CSS формы

Пост о CSS формах с многочисленными примерами

Перейти

Прогресс бары на CSS

Урок о том как создать стильные прогресс бары на чистом CSS и с анимацией. Также Вы можете посмотреть пример и скачать исходники.

Перейти

Анимация — Animate.css

Самый популярный проект CSS анимации в интернете на сегодняшний день. И наверное самый простой и качественный, и к тому же бесплатный.

Перейти

Индикаторы загрузки — Spinkit

Скажу честно данные индикаторы уже встречались на блоге, но мне кажется что их стоит ещё раз Вам показать. Так как это самые красивые индикаторы в интернете на CSS.

Перейти

Кнопки

Сейчас кнопками на CSS уже тяжело удивить, но это довольно достойный вариант

Перейти

Генератор для создания переключателей

Небольшое и качественное интернет приложение, с помощью которого Вы сможете создать красивые переключатели для использования на сайте.

Перейти

Всплывающие подсказки

CSS библиотека бесплатных всплывающих подсказок — Hint.css

Перейти

Цветовые схемы

Схемы цветов для людей, которые не любят копаться в коде

Перейти

30 новых JQuery фишек для веб мастера

С каждым месяцем выходят всё новые и новые полезности для веб мастеров. Собственно которыми я и хочу с Вами сегодня поделиться. Совершенно все файлы бесплатные и имеют демо. А так же просты в установке.

Тут собраны самые разные фишки, которые используют JQuery. Дизайнеры и разработчики не перестают удивлять и радовать нас своими необыкновенными разработками.

В общем смотрите эту подборку, я уверен, что она Вас равнодушным не оставит.

Так же рекомендую посмотреть прошлые подборки:

Ручное зачёркивание контента с помощью JQuery

Демо ι Скачать

Загрузка изображений на JQuery

Демо ι Скачать

Меню, которое открывается правой кнопкой мыши

Демо ι Скачать

Выпадающая навигация на JQuery

Демо ι Скачать

Полноценный редактор текста для сайта

Демо ι Скачать

Открытие нового окна в браузере с помощью JQuery

Демо ι Скачать

Плагин который позволяет поделиться тем, что выделили на сайте

Демо ι Скачать

Красивый и большой слайдер на сайт

Демо ι Скачать

Красивая анимация для текста на JQuery

Демо ι Скачать

Палитра цветов для сайта

Демо ι Скачать

Анимационные шкалы с гибкой настройкой

Демо ι Скачать

Простые и бесплатные табы

Демо ι Скачать

Красивые чек боксы

Демо ι Скачать

Табы с адаптивным дизайном

Демо ι Скачать

JQuery плагин для размещения адаптивных блоков на странице

Демо ι Скачать

Полноценный календарь на JQuery

Демо ι Скачать

Счётчик с эффектов старых часов

Демо ι Скачать

Не плохой эффект при наведении на картинку

Демо ι Скачать

Автоматическая прокрутка для текста и изображений

Демо ι Скачать

Лайтбокс для изображений

Демо ι Скачать

Плагин, который подгоняет равномерно изображения в блоке

Демо ι Скачать

JQuery плагин для подзагрузки картинок при прокрутке

Демо ι Скачать

Плавная прокрутка к заданному месту на странице

Демо ι Скачать

Живая сетка на JQuery

Демо ι Скачать

Фиксированное меню

Демо ι Скачать

Отличное выделение главного элемента на странице

Демо ι Скачать

Простой слайдер с разными эффектами

Демо ι Скачать

Не плохие табы с адаптивным дизайном

Демо ι Скачать

Живой график

Демо ι Скачать

Очень красивое меню с 3d эффектом

Демо ι Скачать

Разнообразные всплывающие подсказки с гибкой настройкой

Демо ι Скачать

10 крутых вещей которые они могут делать

В общем сложности, сегодня в HTML присутствует 142 элемента, которые стандартизованы W3C, исключая те, которые находятся в разработке или устарели (такие как: strike, center, font, plaintext и многие другие). 

<map> тег может быть использован для создания кликабельных областей на картинке, которые могут быть использованы в перенаправлении пользователя на другой сайта или перемещение экрана на другую область страницы.

Вы можете определить в какой области картинки будет отображаться ссылка использую тег <area>, который должны быть внутри тега <map>.

Пример: http://codepen.io/rpsthecoder/pen/PqZNzG

 

Используя <datalist> можно сделать список подсказок, которые будут появляться по время ввода данных в input.

Пример: http://codepen.io/rpsthecoder/pen/MwKybG

 

Иногда требуется подсветка текста на темной фоне сайта, чтобы отделить некоторые участки текста. Этого можно добиться используя тег <mark>. Цвет заднего фона можно изменить с помощью background-color, а так же можно добавить color, чтобы сменить цвет текста.  

Пример: http://codepen.io/rpsthecoder/pen/XbXdMy

 

Вместе с HTML5, появился новый тег <template>, который выполняет функцию хранения информации. Браузер не считывает (пропускает) все что внутри этого тега.

Для примера возьмем тег <table>. Внутри его будет создана одна строка при помощи <tr><td></td></tr>. Так же будет кнопка, которая динамично создает новые строки <tr> внутри <table>. <template> будет хранить <tr>, которая будет использоваться для добавления новой строки в таблицу.

Внимание: Данный тег не поддерживается в IE.

Пример:  http://codepen.io/rpsthecoder/pen/KpVzmQ

 

Иногда требуется сделать размер шрифта меньше — не таким как основной. Например: условия, цитаты, юридические права и так далее. Для этого подойдет тег <small>.

Пример: http://codepen.io/rpsthecoder/pen/RPraga

 

Тег <base> указывает корневую ссылку для всех ссылок внутри используемого документа. Так же об этом теге можно прочитать на официальном сайта Mozilla Developers.

Пример: http://codepen.io/rpsthecoder/pen/eNJZRP

 

Количество девайсов с разными расширениями экрана расчет с каждым днем. Для телефона надо одно разрешение, для компьютера другое. Теперь такой вопрос — как быть с картинками? Ведь их нужно адаптировать под разные экраны. Проблема решена, мы будем использовать HTML5 тег — <picture>, который позволяет добавлять разные картинки под разные расширения.

Внимание: данный тег работает только в Chrome. Для того, чтобы это работало в FireFox нужно поставить dom.image.picture.enable как true в about:config.

Пример: http://codepen.io/rpsthecoder/pen/jPWqLZ

 

HTML5 представил очень много разных возможностей. Одним из них — это возможность выбора цвета. Input элемент, с type=»color», теперь позволяет выбрать цвет из окошка, которое появляется при нажатии на поле.

Пример: http://codepen.io/rpsthecoder/pen/XbXzeb

 

У вас очень много <option> элементов внутри <select> и вы хотите, разбить их по группам? Для этого вам подойдет тег <optgroup>, которые как раз выполняет данную функцию.

Внимание: данный тег может принимать свойства CSS.

Пример: http://codepen.io/rpsthecoder/pen/XbXdLv

Верстка внутри тега <noscript> покажется только когда в браузере будет выключена поддержка JavaScript. Важно указать пользователю на то, что у него выключена поддержка скриптов. Большинство сайтов на сегодня используют JavaScript и поэтому без его работы, сайт будет отображаться/функционировать неправильно.

<head>
<noscript><link rel="stylesheet" href="noscript.css"></noscript>
</head>
<body>
    <noscript><h3>Javascript выключен в вашем браузере.</h3></noscript>
</body>