код красивого дизайна сайта
20 впечатляющих CSS3 примеров, техник и библиотек
В данной подборке собраны самые лучшие и качественные CSS фишки. Тут Вы сможете встретить различные и удивительные демо примеры и техники от знаменитых верстальщиков и дизайнеров, которые стараются доказать, что сейчас возможно сделать практически всё только на чистом CSS. Так же Вы тут сможете встретить несколько уроков в которых подробно рассказывается как сделать подобное творение. Надеюсь, что эта подборка окажется Вам полезной.
Размытое меню
Это действительно красивое и качественно выполненное меню на чистом CSS. Правильный и удачный пример использования новых технологий CSS.
CSS 3D облака
В этом демо Вы сможете создавать и редактировать причудливые облака в 3D. Данные облака на CSS дают понять нам, что возможности веб технологий практически безграничны.
Логотипы на чистом CSS
Это примеры логотипов сделанных только на чистом CSS. Вы только вдумайтесь, при создании не использовались изображения. Это просто нечто.
Алфавит с CSS анимацией
Отличный и художественный пример использования CSS в алфавите
3D навигация для сайта
Простая но очень стильная панель навигации для сайта, конечно же сделанная с помощью только CSS3. никаких изображений и скриптов.
Дудл от Google на CSS
Один из многочисленных дудлов от поисковика Google, сделанный на CSS. Это отличный пример качественного использования CSS анимации
Слайдер
Хорошо и качественно сделанный слайдер для картинок. Плюс 4 примера в демо.
Двойное анимированное кольцо
Красивое оанимационное и разноцветное кольцо с не сильно большим кодом CSS
Размытие на CSS
Мне кажется очень нужный фильтр, тем более он сделан на чистом CSS. с помощью размытия можно привлечь внимание пользователя к определённой точке.
Полное руководство по Flexbox
Данная статья о адаптивных блоках Flexbox. В ней рассказывается полностью о данных блоках, правда статья на Английском.
Красочное и анимированное меню на CSS3
Красивое выпадающее меню для сайта с иконками. Огромным плюсом является то, что оно сделано полностью на CSS.
CSS фильтры
Качественный материал на Английском, в котором рассказывается о применении CSS фильтров на изображения.
CSS формы
Пост о CSS формах с многочисленными примерами
Прогресс бары на CSS
Урок о том как создать стильные прогресс бары на чистом CSS и с анимацией. Также Вы можете посмотреть пример и скачать исходники.
Анимация — Animate.css
Самый популярный проект CSS анимации в интернете на сегодняшний день. И наверное самый простой и качественный, и к тому же бесплатный.
Индикаторы загрузки — Spinkit
Скажу честно данные индикаторы уже встречались на блоге, но мне кажется что их стоит ещё раз Вам показать. Так как это самые красивые индикаторы в интернете на CSS.
Кнопки
Сейчас кнопками на CSS уже тяжело удивить, но это довольно достойный вариант
Генератор для создания переключателей
Небольшое и качественное интернет приложение, с помощью которого Вы сможете создать красивые переключатели для использования на сайте.
Всплывающие подсказки
CSS библиотека бесплатных всплывающих подсказок — Hint.css
Цветовые схемы
Схемы цветов для людей, которые не любят копаться в коде
Пишем CSS лучше и красивее
Скажем честно: писать хороший CSS-код бывает сложно.
Многие разработчики не любят писать CSS. Все что угодно, но только не это! Только не CSS.
Когда при разработке приложений приходилось браться за CSS, это была не самая радостная часть работы. Но ее ведь не избежать, верно? Сегодня порадовать пользователя дизайном приложения настолько важно, что без CSS — никак.
Это я, когда сражаюсь с CSS
Переведено в Alconost
Моя задача сегодня — научить вас писать CSS лучше. Я хочу, чтобы, взглянув на старые проекты, вы подумали: «О боги! Как можно было написать такое?»
А как же CSS-фреймворки? — спросите вы. Они ведь для этого и придуманы — писать хороший CSS-код.
Правильно. Но у них есть недостатки:
Примечание. Это статья не о том, как создавать красивые приложения, а о том, как писать поддерживаемый CSS-код и как его упорядочить.
В примерах я буду использовать SCSS.
SCSS — это препроцессор CSS, по сути — надмножество CSS, которое добавляет некоторые классные возможности, например, переменные, вложенность, импорт и примеси («миксины»).
Далее я расскажу, какие возможности мы будем использовать здесь.
Переменные
В SCSS есть переменные, и основное их преимущество — повторное использование. Предположим, у вас есть палитра цветов для приложения, и основной цвет — синий.
Поэтому синий у вас везде: фон background-color кнопок, цвет color заголовков, ссылок. СИНИЙ — ПОВСЮДУ.
И вдруг синий вам разонравился. Новый фаворит — зеленый.
Вложенность
В SCSS можно использовать вложенность. Поэтому из фрагмента
можно сделать такой код:
Последнее читается лучше, правда? Вложенность позволяет меньше времени тратить на написание сложных селекторов.
Импорт и частичные файлы
Если нужно обеспечить поддерживаемость и удобочитаемость, хранить весь код в одном огромном файле — плохая идея. Если вы экспериментируете или пишете небольшое приложение, это еще терпимо, но на профессиональном уровне… даже не пытайтесь. К счастью для нас, SCSS решает эту проблему.
Мы можем создавать «частичные файлы» — у которых имя начинается с символа подчеркивания: _animations.scss, _base.scss, _variables.scss и так далее.
Не-а. SCSS достаточно умен, чтобы понять, что в этом случае речь идет о частичном файле.
Если вам интересно — почитайте документацию: она достаточно понятно и хорошо написана.
Упорядочивание CSS-кода: методология БЭМ
Часто мы понятия не имеем, какое имя выбрать — хотя именование это важная задача. Представьте, что вы начали писать приложение, а затем решили отложить это дело на несколько месяцев — или, что еще хуже, кто-то взял ваш проект на себя. Если не продумать именование в CSS-коде, будет сложно сходу понять, что имеется в виду в конкретной строчке.
БЭМ помогает решить эту проблему. БЭМ — это соглашение об именовании; расшифровывается как блок, элемент, модификатор.
Эта методология поможет структурировать код, сделать его более модульным и упростить повторное использование. Разберемся, что же значат «блок», «элемент» и «модификатор».
Блоки
Блок можно представить себе как компонент. Возьмем, к примеру, конструктор Lego.
Как из конструктора сделать простой дом? Понадобятся окно, крыша, дверь, пару стен — и всё. Как раз это и есть наши блоки — они несут смысл сами по себе.
Элементы
А как из кубиков конструктора сделать окно? Можно найти кубики, которые выглядят как части рамы, и собрать из них красивое окно. Это и будут наши элементы. Они представляют собой необходимые части блока, но вне блока сами по себе бесполезны.
Модификаторы
Итак, мы сделали какое-то окно. Теперь нам понадобилось зеленое или, например, маленькое окно. Это будут наши модификаторы. Они представляют собой флаги на блоках и элементах, которые используются для изменения поведения, внешнего вида и т. д.
Примечания
Пример
Небольшое упражнение для читателей. Походите по сайтам, на которых вы часто бываете, и подумайте, какие там могли бы быть блоки, элементы и модификаторы.
Например, такую картину я могу вообразить в магазине Google:
Теперь ваша очередь. Проявите любопытство и подумайте, что можно было бы сделать лучше. И конечно, чтобы совершенствовать собственные навыки, нужно самостоятельно искать, экспериментировать и писать код.
Упорядочивание CSS-файлов: принцип «7–1»
Я вас еще не утомил? Отлично! Давайте разберемся, как же упорядочить CSS-файлы. Это здорово повысит эффективность работы и поможет мгновенно находить CSS-код, который нужно поправить.
Пришло время познакомиться с принципом «7–1».
Эти цифры ни о чем вам не говорят, да?
Но всё довольно просто. Нужно следовать двум правилам:
Семь папок:
Основной файл
Сюда импортируются все частичные файлы.
Да, выглядит немножко раздуто, признаю. Но эта архитектура придумана для крупных проектов — а для задач помельче есть другой вариант.
Теперь у нас два варианта:
Верно подмечено! На последнем этапе мы будем компилировать SCSS в CSS.
Из SCSS делаем CSS
Нам понадобятся Node.js и NPM (или Yarn).
Интерфейс у него довольно простой:
Теперь мы знаем, какие инструменты будут использоваться. Остальное сделать еще проще:
Кое-что еще
Перезагрузка на лету
Автоматические префиксы
Мы настроили инструменты разработки — отлично! Теперь поговорим об инструментах сборки, в частности — об этом: Autoprefixer.
Этот инструмент (а точнее, плагин «postcss») анализирует CSS и добавляет к правилам CSS префиксы поставщиков, используя значения из Can I Use.
При создании веб-сайта могут использоваться новые функции, которые поддерживаются не во всех браузерах. Реализовать поддержку таких функций позволяют префиксы поставщиков.
Пример того, как оно будет выглядеть:
Да-да, писать это вручную — утомительно. Облегчит нам жизнь инструмент для автоматического добавления префиксов, который сделает CSS-код совместимым с браузерами без дополнительных усилий.
Итак, чтобы собрать CSS:
Теперь при запуске npm run build будут добавлены префиксы поставщиков, а сам CSS-код будет сжат. Просто магия!
А хотите еще немножко волшебства? Я поднял репозиторий — чтобы вы могли разобраться побыстрее?
Если вам интересно, как я применил эти навыки на странице своего портфолио, загляните в этот репозиторий и полюбуйтесь на результат. Надеюсь, эти примеры помогут лучше понять то, о чем шла речь в статье.
И… это всё на сегодня! Теперь вы умеете писать поддерживаемый модульный CSS-код с возможностью повторного использования.
Перевод статьи выполнен в Alconost.
Alconost занимается локализацией игр, приложений и сайтов на 68 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.
Мы также делаем рекламные и обучающие видеоролики — для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.
Шаблон сайта на чистом HTML
Вам срочно нужно сделать сайт, используя только HTML, и выложить его в интернет? Тогда вам не составит труда скопировать готовый код и следовать моим инструкциям.
Правда полноценный ресурс, с применением одного языка программирования, сделать затруднительно, но вот сайт-визитку из нескольких страничек, вполне возможно.
Если у кого-то именно он и является целью, и нет желания изучать другие языки, то эта статья для них.
Короче, в самописном исполнении, без использования CMS, проще уже ничего не существует.
А для тех кому требуется что-то по круче, в конце статьи есть ссылки на статьи с кодом блочного шаблона, с использованием CSS, и кодом динамического сайта с использованием PHP.
Сайт на чистом html сделаем прямо на этой странице, так сказать — сайт в сайте, вполне рабочий и готовый к заполнению контентом.
Разделим весь процесс на четыре части.
1. Создание места для сайта на своём компьютере.
3. Создание директории сайта
4. Перевод сайта с нашего компа на хостинг, то есть в интернет.
Создание места для сайта на своём компьютере
Первый пункт самый простой.
Чуть погодя, когда у нас будут готовы файлы сайта, мы будем складывать их в эту папку и это будет уже не просто папка, а директория, или корень сайта.
А что, куда и как положить, я подробно покажу после кода главной страницы, чтоб уже было с чем идти в директорию.
Приступим ко второму пункту, самому творческому.
Создание шаблона сайта
Для создания шаблона потребуется редактор, в который нужно будет вставить приведённый ниже код.
Это может быть как простой виндовский Блокнот, так и любой другой текстовый редактор.
Я рекомендую Notepad++. Он бесплатный, простой в использовании, и в отличие от Блокнота, в нём легко просматривать картинку в браузере, после внесения изменений в код.
За основу шаблона возьмём многослойную таблицу HTML. Раньше, до появления CSS все сайты писались таблицами, теперь же более популярной стала блочная вёрстка.
Но и до сих пор, табличная структура не устарела и с успехом применяется.
Например инвестиционная CMS H-script со сложнейшим функционалом, целиком свёрстана на основе таблиц.
Итак, вот такой сайт, с минимальным оформлением.
Как в дальнейшем оформлять таблицы, очень подробно показано в статье Таблицы HTML.
Название сайта (организации)Описание сайтаЗдравствуйте уважаемые будущие веб-мастера! Мне 55 лет и я рад приветствовать Вас на своём сайте. Почему я решил его сделать? За те 3 месяца, пока разбирался в сайтостроении и создавал этот ресурс обнаружилось, что авторы руководств по созданию сайтов считают многие нюансы само собой разумеющимися и не обращают на них внимания. Общая информацияТекст общей информации или реклама !—В этой же ячейке контейнера создаём ещё одну таблицу p style =» text-indent:20px «>Почему я решил его сделать? !—Создаём таблицу подвала— > Вот такой очень простой код. Без учёта пробелов и комментариев, даже 100 строк не наберётся. А ведь это уже готовый, рабочий сайт из трёх страниц, который можно выложить в интернет и заполнить контентом. Между прочим, скорость загрузки будет головокружительной. Как конструировать таблицу, менять расположение ячеек, добавить в таблицу скрипты Javascript и формы обратной связи, читайте в статье Таблицы HTML. Готовый код различных наворотов для вашего сайта вы можете найти на странице Бесплатные скрипты и CSS эффекты для сайта Создание директории сайта Посмотреть и более подробно ознакомится с тем, что из себя представляет директория сайта, можно в статье Создание директории сайта (все ссылки с этой страницы открываются в отдельном окне, чтоб не потеряться). Все действия показаны в редакторе Notepad++. Если кто ещё не установил, то вот ссылка на инструкцию по установке: Установка Notepad++ Хотя, как я уже сказал выше, этот сайт можно написать и отредактировать даже в стандартном виндовсовском блокноте. Так же не помешает ознакомиться с тем, как создать первый файл сайта, в статье Каркас страницы. Итак, начинаем работать. Открываем Notepad++, открываем «Новый документ», проверяем и если нужно исправляем кодировку на uft-8 (без БОМ), копируем код сайта с моей страницы, вставляем его в поле редактора. Затем заходим в папку «site», в ней уже есть первый файл index.html, и создаём там-же ещё две папки content и images. В результате директория должна выглядеть следующим образом:
Теперь, чтоб в дальнейшем не писать длинные адреса для изображений, откроем папку content и создадим в ней ещё одну папку для картинок с названием images1. В неё будем складывать изображения для всех страниц, кроме главной. Возвращаемся в редактор, выбираем меню Запуск (верхняя строка панели редактора), и в нём Launch in Chrome. Если конечно у вас другой браузер, то выбрать нужно его. В браузере должен открыться шаблон, который показан в начале статьи. Если вы пишете сайт в блокноте, то запускать его нужно будет из поисковика, то есть из папки site открыть файл index.html. Вот теперь можно начинать его править так, как Вам нужно. Все позиции, которые можно изменить, указаны в комментариях к коду. После изменения какой либо позиции, нужно нажать Сохранить(третья иконка слева), и через Запуск посмотреть как получилось. Поле для статьи и поля в сайдбаре будут увеличиваться по вертикали, по мере заполнения их текстом, автоматически, причём если высота текста статьи не ограничивается, то высота текста в сайдбаре не должна превышать высоту статьи. Теперь разберёмся с картинками. Изображения в моём шаблоне загружены через сервис trueimages. Вы же будете делать свои, и сохранять их в папке images и images1 директории site, значит адреса картинок будут другими. Как сделать картинку рассказано в статье Как сделать картинку для шапки в Paint(это для тех кто не знаком с фотошопом). А адреса у Вас буду выглядеть так: Для Главной (index.html) — images/имя рисунка.
А на всех последующих страницах вместо images ставиться images1. Картинки маркеров на Главной прописываются так
А на следующих страницах так опять вместо images — images1 Вот теперь можно из шаблона сделать свой сайт, со своими изображениями, и своим текстом. Последующие страницы делаются по тому же шаблону, только сохраняются в папке «content», и называются не «index.html», а по заголовку статьи, только в названии файла он пишется английскими буквами, с окончанием «html». Изображения для них размещаются соответственно в папке images1. Если и на главной, и на других страницах, есть одни и те-же картинки, то они должны быть в обеих папках. Адреса этих страниц определяются так. Когда Вы создадите страницу, сохраните её в папке content, выберете в Notepad++ меню Запуск, и откроете в своём браузере, то в адресной строке браузера как раз и будет нужный адрес. Вставляется он в виде ссылки перед текстом «Другая страница» (как пишутся ссылки читайте в статье Ссылки примерно вот так
На моём сайте можно подобрать ещё несколько красивостей для оформления страницы, как то: красивая прямая линия, рамки, бегущая строка или бегущая картинка, кнопка и ещё кое что. Когда все доработки будут сделаны, то есть сайт будет готов, можно переходить к третьему пункту — выводу сайта в интернет. Перенос сайта со своего компьютера на виртуальный хостинг, то есть в интернет Для этого нужно будет приобрести хостинг и домен. Что такое хостинг, можно посмотреть здесь, а доменное имя сайта — это адрес, по которому Ваш сайт будет определятся в интернете. Доменов бесплатных не бывает, а вот хостинги есть, но я рекомендую всё же использовать платный хостинг. Во-первых, 1200 руб. в год — смешная цена, а во вторых гарантия того, что Ваш сайт будет доступен в любое время по всему миру, и оперативное решение возникающих проблем (а это возможно только на платных хостингах), того стоит. Я рекомендую Вам хостинг Бегет. Это один из, если не самый лучший хостинг провайдер России. Евгений Попов даже запустил проект «Хостинг-Нинзя», по выявлению лучшего хостера, и заключающийся в опросе пользователей. В конце концов этот проект стал крупнейшим сервисом по подбору хостинга, и Бегет сразу занял, и твёрдо удерживает в нём первое место.
Цена хостинг + домен = 1620 руб. в год. Первый месяц(целый месяц!) — тестовый, то есть вначале покупается только домен за 120 руб в год, и только через месяц, если Вам понравилось, оплачиваются услуги хостинга. Можно за год, можно ежемесячно. Но самое главное, я считаю — это постоянная доступность сайта, и круглосуточная моментальная и доброжелательная техподдержка. А это уже встречается не часто, даже за более солидные деньги. Расскажу пару запоминающихся случаев. Как то раз я набрав адрес своей админки, в ответ получил, не помню уж какую, ошибку. Представляете моё состояние? Специалисты техподдержки смогли войти на сайт, всё исправили, и сообщили об этом мне, с полным разъяснением причины. Пользуйтесь на здоровье, только поаккуратнее. В другой раз пытался установить крутую тему, но она никак не хотела устанавливаться. В основном архиве находились ещё архивы, а в них ещё. Позвонил в техподдержку, и через час тема уже стояла и работала на сайте. В каком ещё хостинге Вам окажут такую помощь. Да ни в каком. Нет таких больше. Вот на его то примере, я и покажу процесс появления Вашего сайта в интернете. Подробнее про Бегет и про то, как на нём зарегистрироваться и приобрести хостинг и домен читайте в статье Перевод сайта с Денвера на хостинг. Читайте там до абзаца «А вот теперь тот способ переноса сайта…». Дальше расписан перевод сайта с Денвера, и Вам это не нужно. Когда сайт зарегистрирован, проходим в панель управления хостинга.
Здесь нас интересует раздел Файловый менеджер, так как именно при его помощи мы сейчас перенесём всё, что сделано у нас на компьютере, в интернет. Итак, открываем менеджер, и дважды щёлкаем по строке с доменным именем вашего сайта. Откроется директория, в которой должна быть папка public.html. Вот в неё и будем переносить файлы с нашего компа. Открываем папку public.html и щёлкнув по разделу Новая папка, создаём там две папки images и content. В папке content — папку images1. Короче, всё так-же, как на компьютере. Затем находим Загрузить файлы, и щёлкнув по нему, откроем окно загрузки
Здесь заходим в Выбрать, и, в открывшемся поисковике, находим файлы и папки созданные на нашем компе, в директории site. Первым делом выбираем файл index.html, и загружаем его на хост, нажав Загрузить в меню окна загрузки. Затем точно таким-же образом загружаем файлы из папок images, images1, и content в одноимённые, созданные на хостинге. Адреса страниц при этом изменятся так как в них добавиться доменное имя сайта, примерно так: Для главной — Доменное имя/index.html Значит, все адреса в меню нужно будет менять. Для этого щёлкаем правой клавишей мыши по index.html, и в открывшемся меню выбираем Правка.
После чего откроется редактор менеджера в котором старые адреса нужно будет убрать, а новые прописать. У меня, к сожалению, нет картинки с нашими файлами, но редактор менеджера отличается от Notepad++ только подсветкой синтаксиса, думаю разберётесь без картинки. Если редактор менеджера кому-то не понравиться, можно скачать файл на компьютер, открыть в Notepad++, отредактировать (изменить адреса), удалить старый фал из менеджера, а отредактированный загрузить обратно. После того, как адреса переписаны, нужно ещё задать права доступа к папкам. Для этого снова щёлкнув правой клавишей по строке с папкой, выбираем Изменить атрибуты. В открывшемся окне, в поле Кодовое значение, проставляем 644 и жмём Изменить(что такое 644 и другие права доступа можно узнать в интернете) Всё, можно закрывать окно загрузок, файловый менеджер, и несколько дней ждать когда ваш сайт проиндексируется и можно будет набрав в адресной строке браузера доменное имя, увидеть его в интернете. Код блочного шаблона сайта можно изучить прочитав статью Код сайта HTML+CSS. Ссылка на статью чуть ниже в меню. Да, ещё о том, как сделать этот сайт побольше. Для этого в директории сайта в папке content создаются несколько папок для рубрик, каждая со своей папкой images. Папки называются по названию рубрик и в каждую из них помещается несколько файлов со статьями по теме рубрики. Это конечно-же усложняет структуру сайта и затрудняет работу с контентом, картинками и возможными скриптами, но вполне возможно. Всё остальное делается так, как описано выше, но я настоятельно рекомендую, для больших сайтов использовать php, о чём я подробно рассказал в статье Код сайта на php. Ссылка на статью чуть ниже в меню. Ну а если вас устраивает вариант показанный на этой странице, то надеюсь, уже завтра ваш сайт на чистом HTML, можно будет найти в интернете.
|
|---|
