css » Блог о СОЗДАНИЕ САЙТОВ | Разработка сайтов

Реалистичные переключатели на CSS

HINT.css - A tooltip library in CSS

Верстаем вот такой блочек на CSS

<div style="width:200px; height:200px; border:1px solid #ccc; display:block" class="ribbon">
asdf
<p><span>Новое</span></p>
</div>

<style>
.ribbon {
    color: #fff;
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 5px;
    font-weight: 900;
    font-family: Arial, sans-serif;}

.ribbon p span {
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    display: inline-block;
    right: -26px;
    text-align: center;
    position: absolute;
    text-transform: uppercase;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2);
    top: 21px;
    background: red;
    width: 100px;
    padding: 3px 10px;}	
</style>

Выпадающее меню на Css

Страница скрипта, там и демо

Интересные штуки с CSS

Что бы талица была зеброй

table tr {
   background: white;
}

table tr:nth-child(odd) {
   background: #f4f4f4;
}

А теперь что бы еще и подсвечивался рядок при наведении

.table tbody tr:hover td{
  background-color: #f5f5f5;
}

Прячим всплывающее окно при наведении на урл

a.js-only {
  -webkit-touch-callout: none;
}

Задавая это свойство элементу вы можете определять то, как будет выглядеть элемент SPAN. Например, как radio button:

span.lookLikeRadio {
  -webkit-appearance: radio;
}

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

input[type="password"] {
  -webkit-text-security: square;
}

На этом все. Не забывайте подписываться.

3д буквы на CSS-е