Jedi CSS
  • Школа
  • Статьи

Список записей блога

  • треугольник css

    Адаптивный треугольник в CSS

    Рассмотрим варианты, как сделать треугольник, который смотрит вниз, с помощью CSS, используя псевдоэлемент «after»

  • webTrip-1 – шоу о истории Всемирной Сети

    webTrip #1, год 1991: рождение Веба, первый сайт и Терминатор-2

    webTrip — шоу об истории Всемирной Сети и околотематических событиях.
    В этом выпуске: рождение Веба и первого сайта, фотошоп-2, Джон Бардин — изобретатель транзистора и выход на экраны Терминатора-2.

  • Анимация таблицы в CSS

    Реализуйте эффект, чтобы строка таблицы изменяла форму при наведении курсора.

  • чеклист верстальщика

    Чеклист верстальщика

    Гигиена кода — залог крепкой и надёжной вёрстки. Чеклист помогает не допускать банальных ошибок и освободить голову для решения сложных задач.

  • задачка: анимированная рамка

    Анимированная рамка с градиентом

    Сделайте, чтобы рамке с градиентом добавлялась анимация при наведении на элемент.

  • Задачка на прокачку: выход из прямоугольника

    Задачка на прокачку: выход из прямоугольника

    Повторите эффект, когда картинка выходит за рамки родительского блока

  • основные селекторы css

    Основные селекторы CSS

    Селекторы объясняют браузеру, какие стили применить к элементу. Это основа CSS.

  • box shadow css

    CSS свойство box-shadow и его параметры

    Box-shadow добавляет элементу одну или несколько теней

  • Задачка на прокачку: блоки без текста

    Задачка на прокачку: блоки без текста

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

  • установка emmet для sublime

    Emmet для Sublime text: установка

    Emmet — плагин, ускоряющий написание HTML и CSS кода. Статья поможет установить плагин для Sublime text.

  • Вторая задача сделать выпадающее меню на CSS

    Задачка на прокачку: выпадающее меню-2

    Придумал новую задачку, по мотивам прошлой. Думаю, будет легко, но весело. Возникнут сложности — начните с первой 😉

  • Блочная вёрстка на примере банки с водой

    Блочная вёрстка на примере банки с водой

    Рассмотрим вёрстку блока с контентом на примере банки с водой: как правильно использовать отступы и не писать лишний код.

  • Задача – сделать выпадающее меню на CSS

    Задачка на прокачку: выпадающее меню

    Задачка на прокачку — это небольшое упражнение на знание CSS. Времени на решение много не уйдёт, а размяться поможет. Главное условие — соблюдать ограничения. Надеюсь, вам понравится.

  • css изображение по центру

    CSS: Картинка по центру

    Самый простой способ поставить картинку по центру — флекс. Работает одинаково хорошо со всеми тегами: див, спан или чекбокс, не важно.

  • Не используйте #ID в CSS

    Используйте ID по прямому назначению: для идентификации элементов. Для полей ввода, якорных ссылок или яваскрипта. Стили через #id не назначайте.