Рубрика «HTML и CSS»

В этой статье мы научимся менять внешний вид checkbox или radio-кнопок без использования JavaScript. Ниже приведены примеры, которые можно в живую опробовать. Чтобы перенести примеры на свой сайт достаточно скопировать HTML разметку и CSS стилизацию. Пример 1: Checkbox синего цвета Нажмите HTML разметка CSS оформление .chekbox-two .checkbox{cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none} .chekbox-two .checkbox > input[type=»checkbox»]{position:absolute;opacity:0;z-index:-1} .checkbox__icon{display:inline-block;color:#999} input[type=»checkbox»]:checked ~ .checkbox__icon{color:#2A7DEA} …

Читать далее

Сегодня будет легкий, но классный урок. Мы познакомимся с HTML 5 Canvas. С помощью Canvas Вы сможете создавать интересные эффекты на странице, разрабатывать игры и полезные графические инструменты. При этом всем работа с HTML 5 Canvas осуществляется посредством языка программирования JavaScript, но там все очень просто. Его поддержка радует во всех смыслах, так как Canvas …

Читать далее

Предлагаю вашему вниманию креативную подборку красивых заголовков, которые Вы можете скопировать на свой сайт. Анимация реализована на CSS3, поэтому Вам не потребуется дополнительно подключать скрипты. Анимация для заголовка HTML разметка CSS оформление @import «https://fonts.googleapis.com/css?family=Russo+One»; h2.funny-title{border-top:5px solid #E0DBDE;border-bottom:5px solid #E0DBDE;font-size:70px;text-align:center;margin-top:40px;margin-bottom:5px;text-transform:uppercase;font-family:’Russo One’,sans-serif;font-weight:900;letter-spacing:8px} @-webkit-keyframes move-background { 0%{background-position:-300px 0} 100%{background-position:300px -300px} } @-moz-keyframes move-background { 0%{background-position:-300px 0} 100%{background-position:300px -300px} …

Читать далее

Сегодня Вы научитесь делать прелоадер на страницу. Прелоадер это анимация, которая отображается пользователю, чтобы он не скучал, пока грузится сайт. Рекомендую посмотреть видео-урок «Хауди Хо» о том как сделать 2 типа прелоадера: Который просто анимируется до тех пор, пока страница не загрузится; Который отображает процент загруженности. Я сделал интересную подборку 20-и готовых решений, которые можно …

Читать далее

Я составил подборку CSS кнопок, которые могут быть использованы в веб-проектах без применения JavaScript ☝ 0. Невероятно красивая кнопка с градиентом Подключение HTML: Подключение CSS: .button-container { position:relative; left:50%; margin-top:50px; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%) } .btn-gr { display:block; height:50px; width:186px; position:relative; overflow:hidden; text-decoration:none; text-transform:uppercase; letter-spacing:2px; color:#fff; font-size:14px; text-align:center; color:#fff } .btn-gr:after { position:absolute; content:»; display:inline-block; background:#3bade3; background:linear-gradient(45deg,#3bade3 …

Читать далее

Bootstrap 3 содержит адаптивные (служебные) классы, которые позволяют управлять видимостью отображения элементов в зависимости от типа устройства. Phones (<768px) Tablets (≥ 768px) Desktops (≥ 992px) Desktops (≥ 1200px) .visible-xs-? Видимый Скрытый Скрытый Скрытый .visible-sm-? Скрытый Видимый Скрытый Скрытый .visible-md-? Скрытый Скрытый Видимый Скрытый .visible-lg-? Скрытый Скрытый Скрытый Видимый Вместо знака ? необходимо указать block, inline …

Читать далее

Когда нужно сделать адаптив для сайта, то обычно я использую следующие разрешения мониторов: @media(min-width:0px) and (max-width:320px) { /* совсем маленькие экраны андроидов */ } @media(min-width:321px) and (max-width:480px) { /* популярные разрешения смартфонов уже более позднего поколения андроид */ } @media(min-width:481px) and (max-width:768px) { /* телефоны в перевернутом состоянии и некоторые планшеты */ } @media(min-width:769px) and …

Читать далее

Эта статья поможет изменить вид поля для отправки данных input[type=file], который по умолчанию довольно невзрачный. Ниже приведены 3 примера оформления input file на все случаи жизни. Вам достаточно скопировать готовый код к себе на сайт. Пример 1: Стилизация Input File под скрепку attach_file Добавить файл HTML разметка CSS стилизация .example-1 .form-group{padding:1em;margin:1em} .example-1 input[type=file]{outline:0;opacity:0;pointer-events:none;user-select:none} .example-1 .label{width:120px;border:2px …

Читать далее

Вы можете воспользоваться готовым вертикальным меню для сайта на HTML и CSS, которое можно разместить, например, в сайдбаре. Меню раскрывается, если навести на него мышкой. Для пунктов меню используется готовый набор иконок font-awesome. Вам достаточно просто скопировать готовый код ниже и все будет работать! HTML разметка CSS оформление @import «//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css»; @import «https://fonts.googleapis.com/css?family=Titillium+Web:300»; .fa-2x{font-size:2em} .fa{position:relative;display:table-cell;width:60px;height:36px;text-align:center;vertical-align:middle;font-size:20px} .main-menu:hover,nav.main-menu.expanded{width:250px;overflow:visible} …

Читать далее

Когда пользователь попадает на страницу с ошибкой 404 (страница, которой не существует), то существует большая вероятность, что он уйдет с вашего сайта. Такая страница должна быть правильно оформлена и содержать полезный материал. Сегодня мы рассмотрим несколько привлекательных примеров 404 страницы. 404 страница, стилизованная под помехи 404 страница с плачущим ребенком 404 страница, оформленная под синий …

Читать далее