Bookmark css что это

Частная коллекция качественных материалов для тех, кто делает сайты

Creativo.one2000+ уроков по фотошопу
Фото-монстр300+ уроков для фотографов
Видео-смайл200+ уроков по видеообработке
Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни

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

Выбирайте тот урок, который интересует Вас больше всего на данный момент. К каждому уроку Вы можете оставить свой комментарий, а также проголосовать.

Как выбрать хороший хостинг для своего сайта?

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

Создан: 15 Апреля 2020 Просмотров: 10579 Комментариев: 0

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Читайте также: If isset include php

Создан: 23 Ноября 2018 Просмотров: 18131 Комментариев: 0

Разработка веб-сайтов с помощью онлайн платформы Wrike

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

Почему WordPress лучше чем Joomla ?

Этот урок скорее всего будет психологическим, т.к. многие люди работают с WordPress и одновременно с Joomla, но не могут решится каким CMS пользоваться.

Создан: 26 Августа 2017 Просмотров: 28572 Комментариев: 0

Про шаблоны WordPress

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

Создан: 3 Августа 2017 Просмотров: 26526 Комментариев: 0

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Самые первые настройки после установки движка WordPress

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

Источник

Закладки с использованием только CSS

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

С 2008 года проводились различные попытки реализовать функционал закладок на чистом CSS без привлечения JavaScript. В основе одного направления лежит использование псевдо-класса :target. Другое направление базируется на псевдо-классе : cheсked для радио кнопок и смежных комбинаторах.

Второе направление показывало гораздо лучший результат, за исключением работы с браузерами семейства WebKit, которые не давали работать вместе селекторам псевдо-класса и смежным комбинаторам. Но в Safari 5.1 и Chrome 13 ошибка наконец-то устранена!

И теперь можно реализовать закладки с использованием псевдо-класса :checked , что, вероятно, станет основным методом для решения данной задачи на несколько лет.

demo sourse

HTML

Контейнер для всей группы. Каждый элемент div закладки содержит радио кнопку (для формирования функционала), метку (для названия закладки) и содержание закладки:

   Закладка №1 Содержание закладки №1
 
 
  Закладка №2 Содержание закладки №2
 
 
  Закладка №3 Содержание закладки №3

CSS

Скрывает радио кнопку (ее не нужно показывать, нам она требуется только для состояния отмеченная/неотмеченная).
Делаем закладки плавающими блоками, чтобы метки выстроились в одну строку.
Абсолютно позиционируем области содержания одну поверх другой.
Когда радио кнопка имеет состояние :checked , переставляем соответствующую область содержания наверх с помощью свойства z-index (визуально она будет появляться, скрывая другие области содержания).

.tabs < position: relative; min-height: 200px; clear: both; margin: 25px 0; >.tab < float: left; >.tab label < background: #eee; padding: 10px; border: 1px solid #ccc; margin-left: -1px; position: relative; left: 1px; >.tab [type=radio] < display: none; >.content < position: absolute; top: 28px; left: 0; background: white; right: 0; bottom: 0; padding: 20px; border: 1px solid #ccc; >[type=radio]:checked ~ label < background: white; border-bottom: 1px solid white; z-index: 2; >[type=radio]:checked ~ label ~ .content

Очень маленький код CSS, который легко масштабируется на любое количество закладок (нужно лишь добавить элементы div с классом tab в код HTML).

JavaScript

В чем польза от данного метода?

Доступность. Радио кнопки скрываются с помощью свойства display: none , поэтому программы для чтения с экрана не будут видеть их и сбиваться. А содержание не использует свойства display: none; и остается доступным.
Работает в Safari 5.1+, Chrome 13+, Firefox 3.6+, Opera 10+, и IE 9+.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: css-tricks.com/13758-functional-css-tabs-revisited/
Перевел: Сергей Фастунов
Урок создан: 26 Августа 2011
Просмотров: 46250
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Источник

Закладки: CSS и фоновое изображение

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

Каждая закладка может иметь три состояния:

Как уже было сказано ранее, нам понадобится всего лишь одно фоновое изображение:

Чтобы фон изменялся мы будем использовать позиционирование фона для каждого состояния:

Активная закладка ( background-position: xxx top )
Обычное состояние ( background-position: xxx 30px )
При наведении указателя ( background-position: xxx 60px )

Теперь перейдем к HTML и CSS.

class="tab"> href="index.html"> Главная   class="active">href="news.html"> Новости   href="articles.html"> Статьи   href="blog.html"> Блог   href="forum.html"> Форум   href="contact.html"> Контакты

Для того чтобы сделать закладку активной нужно добавить класс active этому элементу списка.

.tab, .tab li < border: 0; margin: 0; padding: 0; list-style: none; >.tab < border-bottom: solid 1px #DEDEDE; height: 29px; padding-left: 20px; >.tab li < float: left; margin-right: 4px; height: 30px; overflow: hidden; >/* обычное состояние */ .tab a < background: url(tab.png) right 60px; color: #666666; display: block; font-weight: bold; line-height: 30px; text-decoration: none; >.tab a span < background: url(tab.png) left 60px; display: block; margin-right: 14px; padding-left: 14px; >/* при наведении указателя */ .tab a:hover < background: url(tab.png) right 30px; display: block; >.tab a:hover span < background: url(tab.png) left 30px; display: block; >/* активная закладка */ .active a < background: url(tab.png) right top; >.active a span

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

1С:Предприятие (31)
API (29)
Bash (43)
CLI (99)
CMS (139)
CSS (50)
Frontend (75)
HTML (66)
JavaScript (150)
Laravel (72)
Linux (146)
MySQL (76)
PHP (125)
React.js (66)
SSH (27)
Ubuntu (68)
Web-разработка (509)
WordPress (73)
Yii2 (69)
БазаДанных (95)
Битрикс (66)
Блог (29)
Верстка (43)
ИнтернетМагаз… (84)
КаталогТоваров (87)
Класс (30)
Клиент (27)
Ключ (28)
Команда (68)
Компонент (60)
Конфигурация (62)
Корзина (32)
ЛокальнаяСеть (28)
Модуль (34)
Навигация (31)
Настройка (140)
ПанельУправле… (29)
Плагин (33)
Пользователь (26)
Практика (99)
Сервер (74)
Событие (27)
Теория (105)
Установка (66)
Файл (47)
Форма (58)
Фреймворк (192)
Функция (36)
ШаблонСайта (68)

Источник