Рецепты CSS


Содержание

Рецепты CSS

Здесь собраны небольшие советы по использованию приемов CSS для различных целей.

Изменение цвета подчеркивания

Со ссылками, при помощи CSS, можно сделать интересную особенность. Цвет ссылки, при наведении на нее курсора мыши, остается неизменным, но зато у нее появляется подчеркивание другого цвета, нежели сама ссылка. Данный прием не работает в браузерах Netscape 4.x и Internet Explorer 5.

Пример 1. Изменение цвета подчеркивания у ссылок

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 534213182e688dff • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Кулинарные рецепты CSS

Кулинарные рецепты CSS

Как убрать лишнее пространство вокруг формы? htmlcss

Есть два способа сделать это — с помощью хитрости и с помощью css. Хитрость: вставляем форму в таблицу, помещая её между открывающим и закрывающим тэгами:

Второй способ — с помощью css выставить отступы в ноль:

Почему элементы формы видны даже через перекрывающие их слои? css

Это особенность отображения имеет место в IE и Opera под Windows и, к сожалению, ничего поделать с этим нельзя.

Opera показывает все элементы формы, IE только select. Пример.

Это происходит потому, что эти броузеры при отображении форм используют стандартные элементы интерфейса Windows, в то время как Netscape 6.x/Mozilla каждый раз отрисовывают их заново.


Даже проблема возникает практически во всех новых броузерах при отображении плагинов и слоёв.

На сайте DHTMLLab есть более подробная статья на эту тему. ThomasBrattli предлагает решение проблемы на JavaScript в своем скрипте CoolMenus.

Как убрать полосу прокрутки? html

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

Отключить полосу прокрутки во фрейме элементарно, просто добавьте атрибут

Убрать её из основного окна несколько сложнее. Во-первых, можно открыть окно с помощью JavaScript без активирования прокрутки:

Во-вторых, в некоторых броузерах (IE под Windows пятой версии и старше, а также броузерах на базе Gecko) можно использовать нижеследующую декларацию:

Как можно контролировать размер текстового поля? htmlcss

Увы, Netscape 4.x отображает элементы формы по иному алгоритму, нежели прочие броузеры (InternetExplorer, Opera, и на базе Gecko).

Так как Netscape 4.x использует основной моноширинный шрифт для отображения текста в полях для ввода текстовой информации, а IE использует варьирующийся шрифт (обычно sans-serif) — лучше всего оптимизировать текстовое поле прежде всего для Netscape.

После этого можно использовать декларацию css (которую старые версии Netscape проигнорируют) для подгонки поля под прочие броузеры.

Обычноеполедлявводав Netscape 4.7: Поле для ввода в IE 5.5, подогнанное под размер поля в Netscape (отступы добавлены для вертикального выравнивания текста) Поле для ввода в IE 5.5, подогнанное под размер и внешний вид поля в Netscape (имитация достигается за счет рамки и шрифта)

Могу ли я использовать выпадающее меню для навигации? ia/ugd

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

Минусы использования выпадающих меню:

длинный текст делает меню чрезмерно широким

трудности доступа к опциям в текстовых и речевых броузерах

невозможно увидеть сразу все доступные варианты

некоторые пользователи не догадываются о наличии скрытых опций

оперирование выпадающими меню может представлять трудности для некоторых пользователей («Я не понял, что надо нажать ‘перейти'»)

различный внешний вид в различных броузерах


требует небольшого, но все же программирования (на стороне клиента или сервера)

Еще на эту тему имеет смысл почитать MacintoshHumanInterfaceGuidelines.

Почему у картинок в таблицах появляется отступ внизу? htmlcss

Особенно это заметно в броузерах на базе Gecko (например, в Netscape 6.x) и некоторых версиях Mozilla. Скорее всего это происходит потому, что броузер интерпретирует как строчный элемент. Проблема решается следующей декаларацией:

Илон Маск рекомендует:  TimeSeparator - Переменная Delphi

(подробное объяснение вы можете найти в статье «Tables, Images, andMysteriousGaps».)

После выхода Mozilla 1.0 в него был добавлен «почти стандартный» режим для исправления вышеописанной проблемы. Этот режим включается декларированием в DOCTYPEtransistionalHTML 4.01 (с системным идентификатором) или transistionalXHTML 1.0 (на Mozilla.org есть полный список типов DOCTYPE).

В старых броузерах отступ может появляться из-за пробелов между и закрывающим

. Удалите лишние пробелы и проблема скорее всего решится.

Как удалить рамку вокруг картинки-ссылки? htmlcss

В HTML (и старых броузерах) необходимо добавить атрибут border=»0″ к тэгу img.

В CSS (и новых броузерах) достаточно добавить стилевую декларацию

Еще вы можете сделать рамку невидимой в Netscape 4.x с помощью css, меняя её цвет на цвет фона во внешнем блоке:

Но отступ примерно в две точки вокруг картинки все равно останется.

Как установить отцентрировать таблицу с помощью CSS? css

Корректным способом установки блочных элементов (в том числе и таблиц) по центру является указание таких отступов:

margin-left: auto; margin-right: auto;

К сожалению, это не работает в IE версии старше 6 (да и в шестой работает странно). Чтобы справиться с этим, элементу body следует назначить атрибут text-align: center, но так как это отцентрирует весь текст на странице, то окончательный вариант будет такой:

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

Как сделать резиновую верстку с ограничением по ширине? css

Проще всего было бы использовать атрибут max-width. К несчастью, он не поддерживается большинством версий IE.

Выход — в использовании атрибута width вместе с небольшим фрагментом кода на JavaScript, который будет определять ширину окна и при превышении пороговой величины зажимать её на определенном значении, иначе задавать её равной 100%.

if(d.body.clientWidth) (d.body.clientWidth>800) ? sObj.w

Как задать стиль для hr? css

InternetExplorer и большая часть css-совместимых броузеров (например, на основе Gecko, Opera имеет одну странность, которую документировал StefanM. Huber) работают с hr по-разному. Суть в том, что IE обрабатывает его как строчный элемент, а прочие — как блочный. Поэтому, для горизонтального разделителя красного цвета мы делаем:


Прочие CSS-совместимые броузеры: HR

Тоже самое верно и для выравнивания:

Прочие CSS-совместимые броузеры:

Итак, достичь с помощью css того, что в html выглядит как

. вы можете следующим образом:

Для более подробной информации по этой теме читайте статью MarekProkop «Styling «.

Как изменить отступ для элементов списка с помощью css? css

Единственного правильного пути не существует. Броузеры Gecko и InternetExplorer по-разному интерпретируют css в данном случае. Самый простой вариант для уменьшения отступа — очистить поля и отступы слева. Для увеличения же отступа можно сделать так:

(Те же правила применимы к ol и dl)

EricA. Meyer написал подробное объяснение по этой проблеме.

Как можно добавить отступ между элементами списка? htmlcss

Если элемент списка — текст, лучше всего оформить его как параграф:

В других случаях можно добавить два переноса строки в конце каждого элемента списка:

Для более аккуратного и эффективного решения проблемы следует использовать CSS, так как он не затрагивает структуру документа. Эта декларация даст тот же эффект, что и уже приведенные способы:

Внимание: установка line-height для списка приведет не только к увеличению расстояния между элементами, но добавит междустрочное расстояние для содержания каждого элемента.

Почему текст в Netscape 4.* становится все меньше и меньше? htmlcss

Netscape 4.* рассматривает следующие один за другим тэги

(даже корректно закрытые) как вложенные, и поэтому уменьшает размер текста.

Проблема возникает оттого, что пары

в модели отображения Netscape 4.* взаимно уничтожаются. Добавьте пробел или любой другой символ между тэгами (например, так:

Рецепты CSS

— управление отображением множества документов с помощью каскадных таблиц стилей

— Более точный контроль над внешним видом web-документов


— Различные представления для разных носителей информации

— Сложная и проработанная техника дизайна

Всплывающая подсказка на css

Способов реализации всплывающих подсказок (tooltip) придумано очень много. Об одном, очень простом методе, реализованном с использованием только css, пойдет речь в этой статье.

Вертикальное выравнивание элемента внутри блока

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

Выравнивание без expression

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

Рисуем различные фигуры CSS

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

Разбивка текста на колонки с помощью CSS3

Когда возникает задача распределить текстовый контент в несколько столбцов, решить ее довольно просто при помощи CSS 3. На сегодняшний день такое решение поддерживается практически всеми браузерами и вполне пригодно для использования в «боевых условиях». Ложкой дегтя, по прежнему является ИЕ, влючая восьмую версию, но эта проблема частично решается с помощью js.

Резиновый фон для кнопок в формах

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

Решение было подсмотрено на одном из сайтов и с тех пор я успешно применяю этот способ в своей повседневной работе.

Создание меню на CSS – руководство для новичков

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

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

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

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

Илон Маск рекомендует:  Написание plugin'ов для internet explorer

На объёмных сайтах, содержащих более 50 страниц, невозможно разместить полное меню для доступа ко всем разделам.

В таком случае следует использовать выпадающее меню на CSS, при клике на которое появляются дополнительные ссылки на подразделы.

Разновидности меню в CSS


Существует сразу несколько видов и типов CSS меню:

  1. Главное меню . Это список определённых ссылок на ключевые разделы веб-сайта.
  2. Дополнительное меню . Такое меню имеет иерархическую структуру и бывает трёх типов:
    • Выпадающее меню . Раскрывается при наведении курсора мыши на пункт;
    • Всплывающее меню сайта . Раскрывается при клике на определённом пункте;
    • Статическое дополнительное меню для CSS . Древовидная структура, представленная в уже раскрытом виде.

Как создать меню в CSS?

Приведём пример создания простого горизонтального и вертикального меню на CSS с пояснениями.

Код горизонтального меню прописывается следующим образом:

В конечном итоге получается подобное горизонтальное меню :

Код вертикального меню записывается так:

Вертикальное меню , полученное при помощи данного кода, выглядит так:

Руководствуясь всеми вышеперечисленными принципами, приведём код для простого выпадающего меню:

Получаем такое выпадающее меню :

Как вы видите, достаточно простая HTML разметка и всего несколько строк CSS кода позволяют создать простое, но стильное меню, которое обязательно найдёт свое место в каком-либо веб-сайте. Обязательно попробуйте реализовать что-то подобное самостоятельно.

Codre Blog

Блог разработчиков Codre studio

12,337 участников
Присоединиться

Подборка полезных CSS рецептов, или чем мы занимаемся на голых пятницах

Автор: admin · Июнь 28, 2014

В нашем отделе веб-разработки есть хорошая традиция. Каждые 2 недели у нас проходят «голые пятницы» — это мини-конференции, на которых мы делимся интересными и полезными знаниями, накопенными в процессе работы. Сегодня таких знаний у нас накопилось довольно много, и мы решили начать постепенно делиться ими с общественностью в лице Хабрасообщества.

Итак, представляем вашему вниманию сборку интересных и (надеемся) малоизвестных HTML и CSS-рецептов. Будем рады, если каждый из вас узнает что-то новое!

Центрирование блока по вертикали и горизонтали

Чаще всего такие блоки с помощью свойств top и left смещают на 50%, а затем сдвигают в центр отрицательными отступами. Но есть более элегантный способ, о котором знают не все:

Большая подборка полезных CSS рецептов для верстки

Вывод строки текста в многоточие


Данный трюк работает лишь только с одной строкой. Если текст будет состоять из 2х строк, то ничего не произойдет.

Но есть еще один метод, правда он не кроссбраузерный и работает только в -webkit браузерах:

Clearfix

200?’200px’:»+(this.scrollHeight+5)+’px’);»>
.clearfix:before,
.clearfix:after <
content:»»;
display:table;
>

.clearfix:after <
clear:both;
>
.clearfix <
zoom:1;
>

Изменяем стандартный цвет выделения текста в блоге

Пуленепробиваемый синтаксис @Font-Face

Оборачиваем длинные URL и большие объемы текста посредством CSS

Создаем эффект буквенницы

Стили для разных девайсов (по ширине экрана)

200?’200px’:»+(this.scrollHeight+5)+’px’);»> /* Смартфоны (портретный и ландшафтный режимы) ———— */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) <
/* Styles */
>

/* Смартфоны (ландшафтный режим) ———— */
@media only screen and (min-width : 321px) <
/* Styles */
>

/* Смартфоны (портретный режим) ———— */
@media only screen and (max-width : 320px) <
/* Styles */
>

/* iPads (портретный и ландшафтный режимы) ———— */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) <
/* Styles */
>

/* iPads (ландшафтный режим) ———— */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) <
/* Styles */
>

/* iPads (портретный режим) ———— */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) <
/* Styles */
>

/* Пк и ноутбуков ———— */
@media only screen and (min-width : 1224px) <
/* Styles */
>

/* Больших экранов ———— */
@media only screen and (min-width : 1824px) <
/* Styles */
>

/* iPhone 4 ———— */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) <
/* Styles */
>

Оформляем ссылки в зависимости от контента

Метка: CSS-рецепты

Разная скорость анимации при использовании css-transition на события mouseover и mouseout

Скажем, возникла необходимость, чтобы скорость анимации для CSS-transition была разная при событиях mouseover и mouseout. Пусть при наведении (mouseover) курсора прозрачность элемента меняется плавно, а при уходе с элемента (mouseout) прозрачность восстанавливается быстрее.
Для этого надо написать следующую последовательность CSS-правил:


Время анимации указанное в первом правиле будет использовано при анимации на mouseout!
А время из второго правила — для анимации на mouseover!

P.S. Браузерные префиксы к transition можете добавить как вручную, так и используя пре- или пост-процессоры для CSS (grunt, gulp плагины etc).

Flexbox и растягивание вложенных элементов на всю ширину родителя

Если хотите, чтобы вложенные элементы, так сказать flex-items, заняли всю ширину родителя (если у вас flex-direction: row) или по высоте (если flex-direction: column), пропишите им свойство flex-grow, отличное от 0 (нуля), что задано по умолчанию.
P.S. Flexbox нереально крут :) Очень удобный инструмент для создания разметки. Вовсю стал его использовать только недавно.

Retina и фоновые картинки

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

Вероятно я не был внимателен, читая этот рецепт. Оказалось, что недостаточно подпихнуть ретине картинку с удвоенным разрешением. Обязательным является прописывание свойства background-size. Например, так:

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

Bootstrap и универсальный селектор *

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

* <
margin: 0;
padding: 0;
>

Эта запись обнуляет все отступы у всех элементов на странице. Или же так:

Так мы задаем красный цвет всем элементам, вложенным в блок с классом classname.
Первый вариант раньше был весьма популярен для глобального так называемого reset’а.
Но у универсального селектора есть недостаток — низкая производительность. И сейчас не рекомендуется использовать такой селектор. Для reset’а стилей в браузерах сейчас принято использовать различные варианты, например такой, как используется в шаблоне html5boilerplate.
Каково же было мое удивление обнаружить вот такую запись

в очень популярном сейчас фреймворке, как Bootstrap. Мало того, что здесь использован универсальный селектор, так здесь ещё происходит глобальная перезагрузка боксовой модели CSS. На моей практике необходимость переключать боксовую модель возникала не очень часто и для весьма ограниченного набора элементов. В Bootstrap же без этого правила не будет работать даже их сетка (grid).
Я уважаю опыт и знания разработчиков Bootstrap и последнее время часто использую их наработки, но в этом случае я совершенно с ними не согласен. И настоятельно не рекомендую использовать это стилевое правило.
Лучшим вариантом было бы добавить в таблицу стилей отдельные классы, например:

Илон Маск рекомендует:  Работа с полигонами

Я намеренно разделил правила на отдельные классы, потому как не всегда будет необходимость обрабатывать элементы и псевдо-элементы одинаково.
В общем, я сильно удивлен решением разработчиков Bootstrap.
P.S. Справедливости ради отмечу, что на стартовой странице Bootstrap’а указана эта особенность фреймворка.

Еще раз про inline-block (коротко)

Сегодня в очередной раз задали вопрос: как кроссбраузерно реализовать свойство inline-block . Для этого воспользуюсь хаком для IЕ 6 и 7 версий. Это необходимо, так как IЕ этих версий не понимает inline-block для блочных элементов, таких как DIV, LI, UL , а только для строчных (например: A, SPAN ). Буду предельно краток.

Именно вот так: в таблице стилей должны присутствовать обе записи. Если же вы предпочитаете условные комментарии, то вторая запись должна быть вынесена в стили для IЕ.
Работает в IЕ6+, ФФ3+, Опера (даже не знаю с какой версии), Хром, Сафари, далее — везде).
Для ФФ2 нужен костыль.

Как убрать обводку у input и textarea в Сафари и Хроме?

Очень просто. В таблице стилей пропишите для input и textarea следущее

Когда это может понадобиться? Дизайнеры любят перерисовывать системные контролы под дизайн, например такой красивый input , который должен тянуться на всю предоставляемую ему ширину

А теперь поместим курсор в поле ввода.

Выглядит немного неаккуратно, неправда ли?

Это же свойство можно использовать, если надо избавиться от рамки вокруг ссылок при фокусе на них. Чтобы, например, не портить «красоту» меню.

Хотя убирать outline и неправильно. При навигации по сайту с помощью только клавиатуры эта рамочка помогает понять, на каком элементе сейчас фокус.


Кликните поочередно на ссылки или используйте клавишу TAB, чтобы навести фокус на них:
обводка есть / обводка убрана

CSS. Рецепты программирования

Книга посвящена технологии Cascading Style Sheets (каскадным таблицам стилей).

Обсуждаются основы CSS, а также средства, обеспечивающие наилучшие методы практической разработки: Web-типографика, изображения, списки, ссылки и навигация, формы, таблицы, макеты и элементы страниц, печать web-страниц, программистские трюки, а также проектирование с помощью CSS. Организованное как удобный справочник третье издание станет хорошим подспорьем для всех разработчиков, работающих с CSS. В отличие от предыдущего издания в нем также рассматриваются FireFox 3, Internet Explorer 8 и Chrome.

Рецепты CSS: геометрические фигуры

Отличная подборка кода CSS для рисования различных геометрических фигур, используя только HTML.

Квадрат

Прямоугольник

Треугольник вверх

Треугольник вниз

Треугольник налево

Треугольник направо

Треугольник в левом верхнем углу

Треугольник в правом верхнем углу

#triangle-topright <
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;

Треугольник в левом нижнем углу

Треугольник в правом нижнем углу

Параллелограмм

Трапеция

Звезда (6-конечная)

#star-six:after <
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: «»;
top: 30px;
left: -50px;
>

Звезда (5-конечная)

#star-five:before <
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: »;
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);


#star-five:after <
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: »;
>

Пятиугольник

#pentagon:before <
content: «»;
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent red;
>

Шестиугольник

#hexagon:before <
content: «»;
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
>

#hexagon:after <
content: «»;
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
>

Восьмиугольник

#octagon:before <
content: «»;
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
>

#octagon:after <
content: «»;
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
>

Сердечко

#heart:before,
#heart:after <
position: absolute;
content: «»;
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
>

#heart:after <
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
>

Знак бесконечности

#infinity:before,
#infinity:after <
content: «»;
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid red;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
>

#infinity:after <
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
>

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

Для отправки комментария вам необходимо авторизоваться.

Ограничение ответственности

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

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

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

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

Пользуясь сайтом, вы принимаете и соглашаетесь со всеми нашими правилами, включая «Ограничение ответственности».

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL