Лого www.SiteHere.ru

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

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

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

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

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

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

HTML часть

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="page">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
        fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
        culpa qui officia deserunt mollit anim id est laborum.
    </p>
 
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
        eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </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

Рейтинг статьи

Понравилась статья - расскажи друзьям! :)

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 не будет опубликован. Обязательные поля помечены *