CSS - Страница 2 из 2 Кладовка кода

06.06.201918.06.2020

Пример слайдера на чистом CSS3

Честно стырено с habr.

1. Верстаем основу

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

<div class="wrapper">
<input type="radio" name="point" id="slide1" checked>
<input type="radio" name="point" id="slide2">
<input type="radio" name="point" id="slide3">
<input type="radio" name="point" id="slide4">
<input type="radio" name="point" id="slide5">
<div class="slider">
<div class="slides slide1"></div>
<div class="slides slide2"></div>
<div class="slides slide3"></div>
<div class="slides slide4"></div>
<div class="slides slide5"></div>
</div>
<div class="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
<label for="slide5"></label>
</div>
</div>

04.06.201923.10.2019

Слайдер на чистом CSS. Пример от школы разработки интерфейсов Yandex.

Слайдер сделан с помощью связки <input> и <label for=”#id”>. Вся магия происходит на уровне селектора #button-N:checked ~ .slider-inner .slider-slides. Когда мы кликаем по одному из инпутов-чекбоксов, он переходит в состояние checked. Мы можем этим воспользоваться и назначить нужный нам translate на контейнер со слайдами: transform: translate(-33%).

HTML часть

<section class="page">
    <div class="slider">
        <input class="slider__input" type="radio" id="btn-1" name="toggle" checked>
        <input class="slider__input" type="radio" id="btn-2" name="toggle">
        <input class="slider__input" type="radio" id="btn-3" name="toggle">
        <input class="slider__input" type="radio" id="btn-4" name="toggle">
        <div class="slider__controls">
            <label class="slider__label" for="btn-1"></label>
            <label class="slider__label" for="btn-2"></label>
            <label class="slider__label" for="btn-3"></label>
            <label class="slider__label" for="btn-4"></label>
        </div>
        <div class="slider__inner">
            <div class="slider__slides">
                <img class="slider__img" src="https://avatars.mds.yandex.net/get-pdb/1863907/66fc05cc-e47d-4daf-ad9e-983def81b0b8/s1200">
                <img class="slider__img" src="https://avatars.mds.yandex.net/get-pdb/1907868/77e32d2e-b4ed-435e-8e48-b7903a67f37b/s1200">
                <img class="slider__img" src="https://avatars.mds.yandex.net/get-pdb/1627222/8efe5070-9036-4913-86b4-8241480525db/s1200">
                <img class="slider__img" src="https://avatars.mds.yandex.net/get-pdb/1858966/d70c660c-6947-4ed3-b0bf-13e985b58427/s1200">
            </div>
        </div>
    </div>
</section>

30.04.201923.10.2019

Бургер-меню с выездом влево

HTML часть. Не забываем подключить jquery.

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="css/burger_menu.css">
<head>
<meta charset="UTF-8">
<title>Burger menu</title>
</head>
<body>
<div class="section">
<div class="menu-block">
<nav class="menu-nav">
<a class="menu-nav__link" href="#">Главная</a>
<a class="menu-nav__link" href="#">Портфолио</a>
<a class="menu-nav__link" href="#">Обо мне</a>
<a class="menu-nav__link" href="#">Контакты</a>
</nav>
<a href="#" class="menu-btn">
<span></span>
</a>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/transform.js"></script>
</body>
</html>

18.04.201923.10.2019

Трансформация 3D карточки-поворот на 180 градусов CSS3

HTML часть

<div class="section">
<div class="container">
<div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
<div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
<div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
<div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
<div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
<div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
</div>
</div>

12.04.201923.10.2019

CSS трансформация с использованием transform

Пример 2 — При наведение на какую-либо область, выезжают и поворачиваются блоки.

HTML часть

<div class="section">
  <div class="phone">
  </div>
  <div class="tablet">
  </div>
  <div class="desktop">
  </div>
  <h1 class="heading">Адаптивная верстка</h1>
</div>

Пример на github

11.04.201919.12.2023

Переворачиваем карточку на 180 градусов с помощью CSS

HTML часть

<div class="wrap">
  <div class="card">
    <div class="front"><span>Front</span></div>
    <div class="back"><span>Back</span></div>
  </div>
</div>

09.04.201923.10.2019

Меняющийся фон сайта на градиенте

Просто добавляем в css

body{
background: linear-gradient(326deg, #316155, #5fc370, #b8c35f, #c3905f);
background-size: 800% 800%;
-moz-animation: screenplug 11s ease infinite;
-o-animation: screenplug 11s ease infinite;
animation: screenplug 11s ease infinite;}
@-webkit-keyframes screenplug {
    0%{background-position:14% 0%}
    50%{background-position:87% 100%}
    100%{background-position:14% 0%}
}
@-moz-keyframes screenplug {
    0%{background-position:14% 0%}
    50%{background-position:87% 100%}
    100%{background-position:14% 0%}
}
@-o-keyframes screenplug {
    0%{background-position:14% 0%}
    50%{background-position:87% 100%}
    100%{background-position:14% 0%}
}
@keyframes screenplug {
    0%{background-position:14% 0%}
    50%{background-position:87% 100%}
    100%{background-position:14% 0%}
}

Пример тут

09.04.201923.10.2019

Переключатели на CSS. Не стандартный checkbox

HTML часть

  <div class="row press">
    <input type="checkbox" id="unchecked" class="cbx hidden"/>
    <label for="unchecked" class="lbl"></label>    
  </div>
  <div class="row press">
    <input type="checkbox" id="checked" class="cbx hidden" checked/>
    <label for="checked" class="lbl"></label>
  </div>
   <div class="row">
    <input type="checkbox" id="unchecked_disabled" class="cbx hidden" disabled/>
    <label for="unchecked_disabled" class="lbl"></label>
  </div>

Рубрика: CSS

Пример слайдера на чистом CSS3

1. Верстаем основу

Слайдер на чистом CSS. Пример от школы разработки интерфейсов Yandex.

Бургер-меню с выездом влево

Трансформация 3D карточки-поворот на 180 градусов CSS3

CSS трансформация с использованием transform

Переворачиваем карточку на 180 градусов с помощью CSS

Меняющийся фон сайта на градиенте

Переключатели на CSS. Не стандартный checkbox

Статистика

1. Верстаем основу

Статистика

Метки