HTML-CSS

02 августа 2020

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

Одним из элементов страницы есть скрытый блок с текстом (а может быть и с другим контентом). По клику на какой-либо элемент, кнопку, ссылку (Читать еще, Подробнее, Больше информации), этот скрытый блок появляется во всей своей красе. Для этого используются технологии HTML+CSS+JS. В принципе, все просто и самодостаточно, но с одним важным "но":
Это все не быстро и требует особых знаний. Ну никак не для контент-менеджера.

Но тут как раз приходят на помощь не особо известные и, поэтому, не особо жалуемые теги <details> и <summary>

Зарегистрируйтесь, чтобы прочесть подробности...
14 января 2019

Очень часто приходится отцентрировать div с position: absolute относительно окна браузера и когда известны размеры экрана и размеры блока, который нужно разместить по центру, сделать это довольно просто. Но что делать, когда размеры могут быть произвольными?

Подробнее... Добавить комментарий
19 мая 2016

И снова обходимся без JS.
В данном хаке не будем удалять стрелку, которая выводится по умолчанию браузером. Просто её скроем, наложив сверху псевдоэлемент :after с фоном с изображением нашей стрелки.

Подробнее... Добавить комментарий
12 мая 2016

Чтобы задать цвет, фоновое изображение, размеры для элемента форм <select> существует масса мануалов основанных на использовании JS, а то и библиотек скриптов типа JQuery. Что очень усложняет последующую их кастомизацию и внедрение в сайт в соответствии с заданным дизайном.

Предлагаемый вариант позволяет легко и быстро задать фон, бордер, размер, а главное, вид стрелки для выпадающего списка <select>. Только CSS!

Подробнее... Добавить комментарий
01 мая 2016

По умолчанию цвет маркеров для списков в HTML есть таким как и сам текст. Допустим, нам нужно сделать цвет текста в списке <ol> черным, а сами цифры фиолетовыми... Конечно можно было бы усложнить код, завернув содержимое <li> в тэг <span>...

Подробнее... Добавить комментарий
02 апреля 2016

Эти CSS псевдоклассы и псевдоэлементы теперь совместимы со всеми распространенными браузерами. Пользуйтесь на здоровье! Много полезного, того, что вы еще не знали.

Подробнее... Добавить комментарий
16 июня 2015

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

Подробнее... Добавить комментарий
23 сентября 2014

Для соблюдения валидности, для обеспечения отображения некоторых символов без ошибок, а так же (самое главное) - для отображения символов, отсутствующих на клавиатуре, используются спецсимволы HTML, которые преобразуются браузером привыводе в нормальные для человеческого взгляда символы. Эти спецзнаки, начинаются с амперсанда '&' и заканчиваются точкой с запятой ';'

Подробнее... Добавить комментарий
20 апреля 2014

Задать стили для каждого второго, третьего, четного и т.д. элеметта html-кода.

Ничто так не заставляет трепетать слабых в математике веб-разработчиков и дизайнеров клиентских приложений, как правила на основе :nth

CSS3 обеспечивает невероятную гибкость в этом плане бла- CSS3 обеспечивает невероятную гибкость в этом плане бла-  обеспечивает невероятную гибкость в этом плане благодаря правилам на основе :nth — :nth-child(n), :nth-lastchild(n), :nth-of-type(n) и :nth-last-of-type(n).

Подробнее... Добавить комментарий
20 апреля 2014

Предлагаю к юзанию удобный сервис онлайн - генератор css3 кроссбраузерного кода. Ну относительно кроссбраузерного, т.к. владельцы "ультрасовременнных" браузеров а-ля ИЕ6-8, не смогут насладиться прелестями цсс3 , которые облегчают жизнь верстальщику, а пользователю дают дополнительные удобства и красоты :)
Здесь - задание скругленных краев, тени для текстов и блоков, конвертация RGBA в HEX и обратно, @Font-face генератор, текст колонками (как в газете), задание градиентов, трансформаций и т.д.

Подробнее... 2 комментария
20 апреля 2014

Учебник html5 css3 от Бен Фрейн (2014).

Если вы искали современный учебник по верстке сайтов, то вот он! Не забивайте голову старыми учебниками, которые научат вас только плохому :)

Эта книга — исчерпывающее практическое руководство по тому, как сделать адаптивным имеющийся дизайн с фиксированной шириной. Кроме того, в ней описываются новейшие и самые полезные методики, обеспечиваемые HTML5 и CSS3 и позволяющие сделать дизайн сайта более компактным и удобным в сопровождении, чем когда-либо прежде. В этой книге также разъясняются общие и наиболее эффективные методы написания и доставки кода, изображений и файлов.
Если вам понятны HTML и CSS, то вы сможете создавать адаптивные веб-дизайны.

Подробнее... 3 комментариев
html5 css3
13 февраля 2014

Рекомендую, отличный учебник по HTML5.

Этот учебник позволит верстальщику улучшить и систематизировать свои знания по современной разметке HTML-страниц, научиться верстать семантично и SEO оптимизировано, от верстки веб-форм и мультимедийных элементов до технологий гео­-локации и JavaScript API.

Скачать отличный учебник "HTML5-рецепты программирования" - Кристофер Шмитт, Кайл Симпсон

Добавить комментарий
04 февраля 2014

Стилизовать инпут типа файл достаточно просто при помощи CSS. Для этого необходимовырезать картинку, заменяющую изображение данного input. Например мы вырезали картинку  input_file.png размером 129px на 44рх. 

Завернем наш инпут в <div class="input-file"> Получится такой html-код:
<div class="input-file"><input type="file" /></div>

Подробнее... Добавить комментарий
31 января 2014

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

Для обеспечения кроссбраузерности в отображении шрифтов, представляю вашему вниманию сервисы для конвертации шрифтов онлайн (.ttf в .eot , .woff и прочие)

 

 

Подробнее... 2 комментария
Футер внизу экрана
26 января 2014

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

Знаю 2 способа решения такой задачи...

Подробнее... Добавить комментарий
26 января 2014
<ul class="columns">
    <li>Column 1</li>
    <li>Column 2</li>
    <li>Column 3</li>
    <li>Column 4</li>
</ul>

.columns {
    margin:0;
    padding:0;
}
.columns li {
    display:inline-block;
    width:25%;;
}

Для такой конструкции элементы списка должны стать в четыре колонки, но последний <li> не влазит, хотя у всех ширина по 25%. Решение данной проблемы заключается в следующем...

Подробнее... Добавить комментарий
HTML CSS
26 января 2014

Простой способ, как придать стили для переключателей и чекбоксов без использования JS.

Блок, в котором мы хотим, чтобы применялась кастомизация радио и чекбоксов должен иметь класс custom-form

В цсс правильно следует прописать путь к своим "выключенная кнопка" и "включенная кнопка".

Подробнее... Добавить комментарий
23 января 2014

Берем фон, желательно не менее 2000рх по ширине и 100рх по высоте.

В css прописываем для body:

body {
background: url(../images/bg.jpg) no-repeat;
-moz-background-size: 100%; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100% 100%; /* Современные браузеры */
background-attachment:fixed;
}
2 комментария

Практически весь контент размещенный на сайте, вся информация является продуктом студии WSI. Если материалы взяты с других ресурсов, то обязательно указана ссылка на эти ресурсы. Вы можете бесплатно пользоваться информацией с нашего сайта, размещать ее на своих сайтах, но так же обязательна ссылка на наш сайт, Web-Sputnik.Info.


Меню
Копирайт © 2020 'Tochcha' Все права защищены