Метка: CSS3

Сайт для платформы онлайн-обучения BikWebClass

  Описание проекта: Разработка сайта для платформы, которая специализируется на онлайн-обучении – BikWebClass. Целью создания платформы является распространение знаний и навыков, которые будут полезны взрослому человеку в различных областях деятельности – от бизнеса до повседневных потребностей. На сегодняшний день доступны следующие онлайн курсы, в таких категориях как: Пищевая безопасность для операторов пищевого рынка Безопасная Еда для потребителей Торговля Безопасность детей   В наличии есть курсы с платным, и бесплатным контентом.         Особенности...

Способы создания кругов с помощью CSS стилей

Довольно часто при верстке веб-проекта есть потребность в создании круглых элементов: круглые кнопки, круглые миниатюры, круглые иконки, или даже целые круглые контейнеры. В некоторых случаях выйти из ситуации можно с помощью простых картинок, а иногда такой подход не помогает. Как же решить проблему, и только с помощью CSS стилей? В сегодняшнем уроке мы рассмотрим 5 основных способов, с помощью которых вы сможете создавать на своих сайтах любые круглые элементы.     Круги в CSS Существует...

Манипулирование степенью важности загрузки ресурсов в браузере

Для браузера не все ресурсы обладают одинаковой степенью важности и приоритета. Каждый браузер имеет свою своеобразную эвристику, согласно которой он определяет, какие ресурсы загружать в первую очередь, а какие – позже. Например, CSS стили имеют более важный приоритет, чем скрипты и картинки. Иногда браузер может неправильно расставлять приоритеты загрузки и подгружать с сервера менее важные ресурсы в самую первую очередь. Например, инструмент для повышения качества веб-страниц Lighthouse от компании Google рекомендует бороться с этим так:...

Сайт для компании НП ООО «Житомирбиопродукт»

  Описание проекта: Разработка сайта для компании-производителя в г.Житомир. Компания НП ООО «Житомирбиопродукт» занимается производством натуральных высококачественных продуктов питания для здоровья человека, которые предназначены для обеспечения профилактики возникновения и развития заболеваний. Компания выпускает свою продукцию под торговым знаком ТЗ «Ан-Нушка». Продукция компании представлена во многих аптеках, торговых сетях, а также интернет-магазинах Житомира, Киева, Львова, Одессы и других городах Украины.     Особенности проекта: 100% адаптивный дизайн Слайдер основных продуктов с кратким описанием и ссылкой на...

Уроки по CSS: что такое единицы просмотра vw, vh, vmin и vmax

Единица просмотра, или, как ее еще называют – длина в процентах от области просмотра – это адаптивная единица в CSS стилях, которая позволяет определять размеры в процентах от ширины или длины области просмотра. Единицы области просмотра полезно использовать в тех случаях, когда другие относительные единицы CSS (такие как проценты) не справляются с поставленной задачей. В официальной документации W3C об этих элементах сказано очень мало, поэтому в сегодняшней статье мы рассмотрим эти единицы более подробно. Также...

Пример сайта-одностраничника с полноэкранными секциями

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

Как сделать красивую анимированную кнопку Поиск с CSS3 и jQuery

В сегодняшнем уроке мы на практике рассмотрим то, как можно создать простую, но очень красивую кнопку для поиска, всего лишь с помощью CSS3 и jQuery. Готовая кнопка будет выглядеть примерно так:     Для создания такой красивой анимированной кнопки для окна поиска мы будем использовать следующие инструменты: HTML – для структуры документа CSS3 – для стилевого оформления и анимации движения jQuery – для реагирования на нажатие кнопок     Некоторое время назад разработчики анимировали HTML...

Как загружать CSS файлы асинхронно

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

Основные моменты для безопасности HTML и CSS

Если вы разработчик и пишете на HTML/CSS, вам нужно знать основные моменты, которые касаются безопасности. Кто-то может сказать, что HTML и CSS не могут быть объектом атаки злоумышленников, но с развитием веб-технологий у них для атаки появляются все больше возможностей. В сегодняшней статье мы рассмотрим самые важные моменты, на которые следует обратить внимание каждому разработчику. Они помогут следовать лучшим методикам безопасности и избежать уязвимостей.     Лучшие практики для безопасности Тщательно проверяйте зависимости, используемые в...

Основы отзывчивой (responsive) типографии в веб-дизайне

Адаптивный или отзывчивый веб-дизайн – это не только столбцы, сетки, картинки и иконки. Все это не будет иметь смысла без текстового контента. Как однажды сказал Билл Гейтс: «Контент – это король». Поэтому, адаптивная типография – это тот важный фактор, который не должен упускать из виду каждый веб-дизайнер и веб-разработчик. В сегодняшней статье мы обсудим основы создания адаптивной веб-типографики, а также те факторы, которые влияют на это.     Основы типографии Хорошая типография – это правильный...

Как добиться многоцветного фона только лишь с помощью CSS

Уже более 5 лет в веб-дизайне лидирующие позиции занимает плоский дизайн (flat design). После того, как в 2010 году корпорация Microsoft выпустила ОС Windows 8, в которой пользовательский интерфейс выдержан в стиле плоского дизайна, этот дизайн начал стремительно набирать популярность. Flat design представлен в виде противоположности реализму и, по задумке, должен подчеркивать эффект «очаровательной простоты» и утонченности. Помимо этого плоский дизайн привнес красочность в традиционный дизайн. Сегодня яркие цвета играют основную роль во всех современных...

Как добиться адаптивности картинок с помощью CSS

В сегодняшней статье мы на практике рассмотрим технику, с помощью которой сможем достичь адаптивности для картинок на своем сайте. Мы рассмотрим 2 способа, которые позволят сделать картинки адаптивными с использованием небольшого количества CSS.     Построение адаптивного макета картинок Для начала предположим, что у нас есть такая простая HTML разметка: <div class="images-box"> <a href="image-URL"> <figure> <img src="image-URL" alt="альтернативный текст картинки"> </figure> </a> <!-- следующие картинки ... --> </div>     На больших экранах наша галерея...

Как создать простые кнопки с помощью CSS3

В сегодняшнем уроке мы на практике сделаем несколько классных, но простых, кнопок с помощью CSS3 стилей. Вы можете их использовать для красивого оформления пользовательского интерфейса своих проектов. Итак, приступим…   Шаг №1 – HTML код (каркас) Каркасный HTML-код очень простой, мы создадим 3 тега ссылки (<a>) с классом button, и, поскольку мы будем использовать три разных цветовых стиля, присвоим каждой ссылке свой класс для цвета. <html> <body> <div id="buttons"> <a href="#" class="button green">кнопка 1</a> <a...

9 онлайн платформ, на которых можно быстро поделиться кодом

Программисты, в основном, используют IDE (интегрированную среду разработки) для своей работы и написания кода. Это довольно мощные инструменты, в которых есть интуитивно понятный и удобный интерфейс, включены предустановленные библиотеки, есть поддержка множества языков, генераторы кода, инструменты для совместной работы и другие. Но, иногда, есть потребность в том, чтобы можно было быстро поделиться с другими сниппетами кода, который рабочий и доступен онлайн. Например, вам нужно разместить на своем сайте кусок рабочего кода и показать демо его...

Пример использования функции calc() для изменения размера шрифта в CSS

Ранее мы делали краткий обзор функции calc() в CSS. Сегодня мы хотим рассмотреть небольшой практический пример, который даст решение для плавного масштабирования размера шрифта в зависимости от размера экрана. Если ранее подобные задачи решались с помощью jQuery, то с появлением функции calc(), это можно сделать с помощью чистого CSS. Функция calc() позволяет делать простые математические вычисления прямо в CSS. А это позволяет легче создавать адаптивные макеты сайтов. Давайте рассмотрим один небольшой практический подход, который позволит...