Разделы
Теги | RSS © 2008 – 2017
Контакты
email: igor@veselov.sumy.ua
skype: utz0r2
» » css

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


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

http://codepen.io/yairEO/pen/pqEGJ

HINT.css - A tooltip library in CSS


HINT.css - A tooltip library in CSS

http://kushagragour.in/lab/hint/

Верстаем вот такой блочек на 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

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

Интересные штуки с 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-е


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

http://jsfiddle.net/secondfre/2a3xh/1/
«»
Вверх