Pull to refresh
6
Karma
0
Rating
Георгий Липартелиани @Georgy1

User

Голые пятницы #1

Lesta Studio corporate blog CSS *HTML *
Tutorial
голые пятницы

Всем доброго времени суток. Сегодня мы поговорим о том, как красиво оформить выделенный текст, совладать с отступами в кнопках, прокачать скролл в мобильных браузерах, скрестить цвет текста с цветом границ, а также рассмотрим интересные новые единицы измерения.
Поехали!
Total votes 72: ↑68 and ↓4 +64
Views 38K
Comments 22

Подборка занимательных CSS рецептов «Голые пятницы #2»

Lesta Studio corporate blog CSS *HTML *
Tutorial
Привет, Хабр! В этот раз мы поговорим о стилизации инпутов без картинок и JS, особенностях вертикальных отступов, CSS счетчиках, необъятных возможностях в именовании классов, а также расскажем, как улучшить анимацию на слабых устройствах.

голые пятницы
Поехали!
Total votes 50: ↑46 and ↓4 +42
Views 50K
Comments 39

Полезные хаки и сниппеты для .htaccess

Website development *
Sandbox


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

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

Если же вам нужны базовые сведения о предназначении данного файла, то вы можете получить из нашей статьи введение в .htaccess (перевод данной статьи не делал, так как там основы, их достаточно в русскоязычном сегменте Сети, но если будет проявлен интерес, то можно и ее перевести для полноты картины — прим. переводчика), в которой достаточно подробно раскрыты все аспекты его применения.
Узнать больше
Total votes 114: ↑92 and ↓22 +70
Views 444K
Comments 82

WEB DESIGN: Переход на личности

Web design *
Здравствуй, Хабрачитатель! Я работаю веб-дизайнером, и сегодня мы продолжим развивать тему, начатую в прошлой статье. А именно, поговорим о взаимодействии двух специалистов, которые обычно работают в связке, при создании сайтов. Статья посвящена дизайнерам и их некоторым типичным ошибкам при работе с макетами.

image

Перед вами 8 ситуаций, в которых будут участвовать web-дизайнер — Дмитрий, работающий в программе Photoshop, и верстальщик — Владимир. Эти два парня знают свое дело, но у них постоянно возникают конфликты, а иногда у одного из них возникает странное желание ударить другого монитором по голове. Впрочем, все мы цивилизованные люди и допустить такой развязки не можем. А потому сейчас мы разберемся в некоторых причинах конфликта этих двух бесценных специалистов.

Читать дальше →
Total votes 120: ↑108 and ↓12 +96
Views 69K
Comments 178

Accordion меню на чистом CSS

Website development *CSS *HTML *
Sandbox
Доброго времени суток уважаемые хабражители. На сегодняшний день большинство техник создания меню-гармошки включают в себя использование псевдо-класса :target. Проблема использования :target заключается в невозможности закрыть какой либо блок в нашем меню, работать будет только «рыскрытие» гармошки.



Пример 1: раскрывающийся список (checkbox)

Пример 2: схлопывающийся список (radio)


Поэтому хочется показать Вам пример реализации Accordion меню на чистом CSS с помощью псевдо-класса :checked. С помощью этого метода у Вас появиться возможность контролировать открытие/закрытие блоков. Меню будет двух типов: полностью раскрывающееся и отображение одного блока при схлопывании других. Использовать будет checkbox и radio соответственно.

Читать дальше →
Total votes 22: ↑17 and ↓5 +12
Views 55K
Comments 23

Подборка PSD: дизайн устройств Apple

Web design *
Доброго времени суток уважаемые хабражители. В веб-дизайне существует некий тренд на различные iдевайсы. На сайтах многих популярных сервисов или дизайн студий разработчики привыкли демонстрировать пользователям адаптивный дизайн с помощью гаджетов от Apple. В этом нет ничего удивительного, это компания всегда славилась своим потрясающим дизайном и это их доминантный признак.

iMac


PSD документ iMac + PSD Mac OS X внутри.
Netcribe: Apple iMac PSD
Ссылка для скачивания

Читать дальше →
Total votes 74: ↑48 and ↓26 +22
Views 32K
Comments 26

Интерактивная инфографика с анимациями CSS и SVG

Website development *CSS *HTML *
Translation
Tutorial
Одной из наименее обсуждаемых функций, все чаще появляющейся в последних браузерах, является поддержка файлов формата SVG. Этот формат характеризуется абсолютной свободой в отображении: легко изменяется в размере, может быть отображен в любом разрешении без потери качества. Во многих случаях SVG весят гораздо меньше, чем, например, PNG или JPG.

image

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

С правильным применением технологий и современным браузером, разработчики могут создавать впечатляющие анимации и эффекты с помощью SVG. Сегодня мы рассмотрим возможности SVG и создадим интерактивную векторную инфографику, демоверсию которой можно посмотреть здесь.
Читать дальше →
Total votes 47: ↑46 and ↓1 +45
Views 44K
Comments 18

Шпаргалка по верстке для больших и маленьких

CSS *HTML *
Sandbox
Tutorial
Приветствую!

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

Статья рассчитана скорее на новичков и на людей, имеющих косвенное отношение к верстке, но которым по долгу службы часто приходится иметь с ней дело. Возможно, даже гуру верстки найдут в ней что-нибудь новое для себя, если давно не совершенствовали свои навыки.
Читать дальше →
Total votes 167: ↑135 and ↓32 +103
Views 99K
Comments 103

Как выглядит беспорядок или были ли у фашистов самонаводящиеся ракеты

Mathematics *
Translation
13 июня 1944 года, через неделю после вторжения союзников в Нормандию, громкий жужжащий звук прогремел в небе избитого боями Лондона. Источником звука было недавно разработанное немецкое орудие войны: воздушная бомба V-1. Будучи предшественником крылатых ракет, V-1 была самоходной бомбой, управляемой с помощью гироскопов, питалась она от простого пульсирующего воздушно-реактивного двигателя, который поглощал воздух и воспламенял топливо 50 раз в секунду. Такая высокая частота пульсации давала бомбе характерный звук, зарабатывая ей прозвище «жужжащая бомба» (в оригинале – «buzz bomb» – прим. перев.).
Читать дальше →
Total votes 318: ↑312 and ↓6 +306
Views 150K
Comments 114

Кроссбраузерность в SVG

Web design *Vector graphics *
Tutorial
Продолжаю серию топиков про SVG. Векторные SVG-элементы корректно отображаются в современных браузерах, но как реализовать поддержку в старых версиях? Разберемся с кроссбраузерностью векторной графики.

image

Предыдущие топики о SVG:

Читать дальше →
Total votes 19: ↑18 and ↓1 +17
Views 21K
Comments 10

Арсенал веб-дизайнера

Web design *
В интернете существует множество сайтов, помогающих веб-дизайнеру в работе: ресурсы с иконками, плюшками для фотошопа, UI-китами, шрифтами, вдохновляющими работами других дизайнеров и многим другим. В этой статье я постарался собрать самые полезные сайты для веб-дизайнеров.

Большие и популярные сайты


Behance - работы лучших дизайнеров со всего мира

Читать дальше →
Total votes 131: ↑108 and ↓23 +85
Views 161K
Comments 40

Подборка инструментов для эффективной frontend разработки

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

Form Builder

image

Этот прекрасный генератор форм поможет вам в создании красивейших CSS логин-боксов и прочих input вещей, при минимальных временных затратах. Помимо форм на сайте этого проекта можно создавать и другие не менее красивые CSS элементы, в том числе кнопки и ленты.
еще 24 ссылки
Total votes 204: ↑197 and ↓7 +190
Views 100K
Comments 46

Внутренние тени в CSS

Website development *CSS *
Translation
Tutorial
Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.

Читать дальше →
Total votes 101: ↑88 and ↓13 +75
Views 338K
Comments 48

Принцип «уверенности» высококачественного веб-дизайна

Web design *
Sandbox
Краткий синопсис

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

image

Под катом примерно 1.1 Мб трафика.
Читать дальше →
Total votes 70: ↑58 and ↓12 +46
Views 21K
Comments 30

Готовим расширение под Chrome, украшаем Хабр

Website development *Google Chrome
Чтобы сделать расширение достаточно минимальных знаний Javasctipt, HTML и CSS. Давайте добавим на хабр догрузку следующей страницы, а также систематическую проверку новых постов на текущей. Примерно как на twitter.

Полностью готовый экстеншн можно установить и проверить в работе через Chrome Web Store, а здесь разберемся как написать основной код с нуля (полный занимает всего 6 KB).



Читать дальше →
Total votes 50: ↑41 and ↓9 +32
Views 29K
Comments 10

Information

Rating
Does not participate
Location
Москва, Москва и Московская обл., Россия
Registered
Activity