Exore LTD » CSS3 » Тетрадь в линейку на CSS3
Лого SiteHere.ru

Октябрь 25, 2019 Запись была обновлена

Время чтения: 2 мин. Прочитать позже

Тетрадь в линейку на CSS3

Тетрадь в линейку на CSS3

Уже приелись стандартные страницы сайтов, хочется что-то новое, креативное и чтобы обязательно смотрелось на сайте. Все учились в школе, и тетрадь в линейку выглядит очень знакомо и привлекает внимание, потому что 11 лет школы.. Еще бы не запомнилась! И в этом уроке мы создадим красивый эффект тетради в линейку используя технологию CSS3.

Реальный пример можно увидеть здесь:

Посмотреть примерСкачать

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



HTML часть

HTML код очень простой. Весь текст находится в блоке <div> с классом page:

1
2
3
4
5
6
7
8
9

<div class="page">
    <p>
        Пример текста
    </p>
 
    <p>
        Еще один абзац
    </p>
</div>


CSS часть

И создадим интересный эффект тетради в линейку используя следующие свойства:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

.page {
    font-family: cursive, Arial;
    width: 700px;
    position: relative;
    margin: auto;
    padding: 15px 0;
    color: #212121;
 
    -webkit-border-bottom-left-radius: 20px 500px;
    -webkit-border-bottom-right-radius: 500px 30px;
    -webkit-border-top-right-radius: 5px 100px;
 
    -moz-border-radius-bottomleft: 20px 500px;
    -moz-border-radius-bottomright: 500px 30px;
    -moz-border-radius-topright: 5px 100px;	
 
    border-radius-bottomleft: 20px 500px;
    border-radius-bottomright: 500px 30px;
    border-radius-topright: 5px 100px;
 
    background: #fcf59b;
    background: 
        -webkit-gradient(
            linear,
            left top, left bottom,
            from(#81cbbc),
            color-stop(2%, #fcf59b)
    );
 
    background: 
        -moz-repeating-linear-gradient(
            top,
            #fcf59b,
            #fcf59b 38px,
            #81cbbc 40px
    );
 
    background: 
        repeating-linear-gradient(
            top,
            #fcf59b,
            #fcf59b 38px,
            #81cbbc 40px
    );		
 
    -webkit-background-size: 100% 40px;
 
    -webkit-box-shadow: 0 2px 10px 1px rgba(0,0,0,.2); 
    -moz-box-shadow: 0 2px 10px 1px rgba(0,0,0,.2); 
    box-shadow: 0 2px 10px 1px rgba(0,0,0,.2); 	
}
 
.page:before {
    content: ' ';
    background: url(tape.png) no-repeat;
    width: 129px;
    height: 38px;
    position: absolute;
    top: -15px;
    left: 40%;
    display: block;
}
 
p {
    padding: 0 100px;
    line-height: 40px;
    margin-bottom: 40px;
    font-size: 30px;
}


Вывод

На мой взгляд очень классный эффект. Конечно можно сделать не желтый фон, а белый, но это уже на ваше усмотрение.


Успехов!

Источник: net.tutsplus.com

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

4 комментария к записи
  • Вереск

    Интересная идея, наверное такими же путями можно и в клетку сделать? И не подскажите ещё как сделать так, чтобы было как у Вас на картинке в начале страницы под наклоном?

     
    Ответить
    • Юрий

      Это я в графическом редакторе повернул. Но можно повернуть весь блок с помощью свойств:

      Chrome, Safari:
      -webkit-transform: rotate(XXdeg);

      Firefox:
      -moz-transform: rotate(XXdeg);

      IE:
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=X);

      Opera:
      -o-transform: rotate(XXdeg);

      где XX — это то значение в градусах, на которое необходимо повернуть.

       
      Ответить
  • ZeroXor

    Согласен, такое можно использовать в виджетах или блоках лендинга, но делать подобное для контента блога — это просто ад. IMO, конечно.

     
    Ответить
    • Юрий

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

       
      Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *