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

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

  1. 1
  2. 2
Scroll Up