• 7 мин чтения • Автор RAMe0

Полезные CSS3 стили

Полезные стили CSS3, которые можно использовать для верстки макетов для современных браузеров.
Например, скругленные края:

.box-radius-1{
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

Примеры кода и результата далее:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a nibh est. Vestibulum laoreet quam ut lacus congue rutrum. Vestibulum facilisis sem sed magna convallis ultricies. Sed imperdiet purus vel tortor consectetur a laoreet quam fermentum. Duis nec tellus at nibh feugiat vestibulum. Curabitur sed felis eget nisi scelerisque bibendum ac et velit. Nullam eget libero non urna ullamcorper lacinia at a tellus. In sodales, nunc eget pulvinar bibendum, turpis dui cursus ante, quis egestas magna est eget odio. Nulla facilisi. Integer sit amet magna odio. Pellentesque vitae fermentum quam. Phasellus vel ullamcorper velit. Donec elementum molestie molestie. In blandit.
Поддерживаемые браузеры
FirefoxChromeSafariInternet ExplorerOpera
.box-radius-1{
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a nibh est. Vestibulum laoreet quam ut lacus congue rutrum. Vestibulum facilisis sem sed magna convallis ultricies. Sed imperdiet purus vel tortor consectetur a laoreet quam fermentum. Duis nec tellus at nibh feugiat vestibulum. Curabitur sed felis eget nisi scelerisque bibendum ac et velit. Nullam eget libero non urna ullamcorper lacinia at a tellus. In sodales, nunc eget pulvinar bibendum, turpis dui cursus ante, quis egestas magna est eget odio. Nulla facilisi. Integer sit amet magna odio. Pellentesque vitae fermentum quam. Phasellus vel ullamcorper velit. Donec elementum molestie molestie. In blandit.
Поддерживаемые браузеры
FirefoxChromeSafariInternet ExplorerOpera
.box-radius-2{
    -webkit-border-top-left-radius: 100px;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-right-radius: 50px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-topleft: 100px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-bottomright: 50px;
    -moz-border-radius-bottomleft: 20px;
    border-top-left-radius: 100px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 20px;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a nibh est. Vestibulum laoreet quam ut lacus congue rutrum. Vestibulum facilisis sem sed magna convallis ultricies. Sed imperdiet purus vel tortor consectetur a laoreet quam fermentum. Duis nec tellus at nibh feugiat vestibulum. Curabitur sed felis eget nisi scelerisque bibendum ac et velit. Nullam eget libero non urna ullamcorper lacinia at a tellus. In sodales, nunc eget pulvinar bibendum, turpis dui cursus ante, quis egestas magna est eget odio. Nulla facilisi. Integer sit amet magna odio. Pellentesque vitae fermentum quam. Phasellus vel ullamcorper velit. Donec elementum molestie molestie. In blandit.
Поддерживаемые браузеры
FirefoxChromeSafariInternet ExplorerOpera
.box-radius-3{
    -webkit-border-radius: 50px 10px 50px 10px;
    -moz-border-radius: 50px 10px 50px 10px;
    border-radius: 50px 10px 50px 10px;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a nibh est. Vestibulum laoreet quam ut lacus congue rutrum. Vestibulum facilisis sem sed magna convallis ultricies. Sed imperdiet purus vel tortor consectetur a laoreet quam fermentum. Duis nec tellus at nibh feugiat vestibulum. Curabitur sed felis eget nisi scelerisque bibendum ac et velit. Nullam eget libero non urna ullamcorper lacinia at a tellus. In sodales, nunc eget pulvinar bibendum, turpis dui cursus ante, quis egestas magna est eget odio. Nulla facilisi. Integer sit amet magna odio. Pellentesque vitae fermentum quam. Phasellus vel ullamcorper velit. Donec elementum molestie molestie. In blandit.
Поддерживаемые браузеры
FirefoxChromeSafariInternet ExplorerOpera
.box-shadow-1{
    -moz-box-shadow: inset 20px 20px 15px #777;
    box-shadow: inset 20px 20px 15px #777;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a nibh est. Vestibulum laoreet quam ut lacus congue rutrum. Vestibulum facilisis sem sed magna convallis ultricies. Sed imperdiet purus vel tortor consectetur a laoreet quam fermentum. Duis nec tellus at nibh feugiat vestibulum. Curabitur sed felis eget nisi scelerisque bibendum ac et velit. Nullam eget libero non urna ullamcorper lacinia at a tellus. In sodales, nunc eget pulvinar bibendum, turpis dui cursus ante, quis egestas magna est eget odio. Nulla facilisi. Integer sit amet magna odio. Pellentesque vitae fermentum quam. Phasellus vel ullamcorper velit. Donec elementum molestie molestie. In blandit.
Поддерживаемые браузеры
FirefoxChromeSafariInternet ExplorerOpera
.box-shadow-2{
    -moz-box-shadow: 10px 10px 2px #000;
    box-shadow: 10px 10px 2px #000;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a nibh est. Vestibulum laoreet quam ut lacus congue rutrum. Vestibulum facilisis sem sed magna convallis ultricies. Sed imperdiet purus vel tortor consectetur a laoreet quam fermentum. Duis nec tellus at nibh feugiat vestibulum. Curabitur sed felis eget nisi scelerisque bibendum ac et velit. Nullam eget libero non urna ullamcorper lacinia at a tellus. In sodales, nunc eget pulvinar bibendum, turpis dui cursus ante, quis egestas magna est eget odio. Nulla facilisi. Integer sit amet magna odio. Pellentesque vitae fermentum quam. Phasellus vel ullamcorper velit. Donec elementum molestie molestie. In blandit.
Поддерживаемые браузеры
FirefoxChromeSafariOpera
.text-shadow{
    text-shadow: 14px 14px 2px #999;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a nibh est. Vestibulum laoreet quam ut lacus congue rutrum. Vestibulum facilisis sem sed magna convallis ultricies. Sed imperdiet purus vel tortor consectetur a laoreet quam fermentum. Duis nec tellus at nibh feugiat vestibulum. Curabitur sed felis eget nisi scelerisque bibendum ac et velit. Nullam eget libero non urna ullamcorper lacinia at a tellus. In sodales, nunc eget pulvinar bibendum, turpis dui cursus ante, quis egestas magna est eget odio. Nulla facilisi. Integer sit amet magna odio. Pellentesque vitae fermentum quam. Phasellus vel ullamcorper velit. Donec elementum molestie molestie. In blandit.
Поддерживаемые браузеры
FirefoxChromeSafariInternet ExplorerOpera
.RGBA-bg{
    background-color: rgba(141, 203, 242, 0.7);
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a nibh est. Vestibulum laoreet quam ut lacus congue rutrum. Vestibulum facilisis sem sed magna convallis ultricies. Sed imperdiet purus vel tortor consectetur a laoreet quam fermentum. Duis nec tellus at nibh feugiat vestibulum. Curabitur sed felis eget nisi scelerisque bibendum ac et velit. Nullam eget libero non urna ullamcorper lacinia at a tellus. In sodales, nunc eget pulvinar bibendum, turpis dui cursus ante, quis egestas magna est eget odio. Nulla facilisi. Integer sit amet magna odio. Pellentesque vitae fermentum quam. Phasellus vel ullamcorper velit. Donec elementum molestie molestie. In blandit.
Поддерживаемые браузеры
FirefoxChromeSafari
.multi-column{
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
}

Теги: CSS/html, CSS3, Web-programing, Браузеры

Комментарии ()