.text {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 16px; /* fallback */
max-height: 32px; /* fallback */
-webkit-line-clamp: 2; /* number of lines to show */
-webkit-box-orient: vertical;
}
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur
venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu
facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum
lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi,
accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend
lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
</div>
animation-delay
-webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
animation-delay: 2s;
-2s
анимация начнется сразу 2 секунд спустя.<div></div>
<div></div>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 2s infinite; /* Chrome, Safari, Opera */
-webkit-animation-delay: none; /* Chrome, Safari, Opera */
animation: mymove 2s infinite;
animation-delay: none;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
@keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
if($name == 'value'){
header("location:page.php");
} else {
echo "Your text";
}
<input type="button" class="button" value="GO AHEAD" />
.button {
display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 218px;
height: 57px;
cursor: pointer;
padding: 10px 20px;
border: 7px solid #BBEBE1;
font: normal 23px/normal Arial, Helvetica, sans-serif;
color: rgba(255,255,255,0.9);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
background: #1ABC9C;
}
img {
width: 100px;
height:auto;
}
height:auto;
100%
.Вот и все ширина будет 100px а высота будет автоматически растягиваться на высоту текста.p{
display: table-cell;
vertical-align: top;
}
img {
width: 100px;
height:auto;
}
.image {
display: table-cell;
vertical-align: top;
padding: 0 20px 0 0;;
}
.section {
display: table;
}
<ul>
<li>Главная</li>
<li>Галерея</li>
<li>Доставка</li>
<li>Контакты</li>
</ul>
ul
ul{
background:#a1a1a1;
padding:5px;
position:absolute;
left:600px;
width:830px;
}
ul li{
position:relative;
left:-5px;
list-style:none;
display:inline;
padding:5px;
padding-bottom:6px;
background:red;
color:#fff;
}
<div>
<p>text..</p>
</div>
<div>
<p>text..</p>
</div>
<div>
<p>text..</p>
</div>
div:nth-child(1) {
background: rgb(122, 206, 122);
height: 140px;
transform: skew(-10deg) rotate(2deg);
-webkit-transform: skew(-10deg) rotate(2deg);
-moz-transform: skew(-10deg) rotate(2deg);
}
div:nth-child(1) p {
transform: skew(10deg) rotate(-2deg);
-webkit-transform: skew(10deg) rotate(-2deg);
-moz-transform: skew(10deg) rotate(-2deg);
padding: 3% 2%;
}
div:nth-child(2) {
border-bottom: 180px solid rgb(233, 233, 65);
border-left: 8px solid transparent;
border-right: 14px solid transparent;
height: 0;
margin-top: 60px;
transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
}
div:nth-child(2) p {
transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
padding: 3.5% 3%;
}
div:nth-child(3) {
border-top: 140px solid rgb(253, 74, 74);
border-left: 23px solid transparent;
border-right: 14px solid transparent;
height: 0;
margin-top: 20px;
transform: rotate(2deg);
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
}
div:nth-child(3) p {
transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
position: absolute;
top: -140px;
padding: 3% 3%;
}
div:nth-child(3):before {
content: '';
width: 124%;
height: 80px;
background: #fff;
position: absolute;
left: -20%;
bottom: 120px;
transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
}
<div></div>
ставьте <button></button>
или что то другоеborder-radius:none;
:hover
<div></div>
измени добавь id class..div {
background: red;
width:100px;
height:100px;
-webkit-animation: mymove 0.3s infinite;
animation: mymove 0.3s infinite;
}
@-webkit-keyframes mymove {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes mymove {
0% {opacity: 0;}
100% {opacity: 1;}
}
/* При наведении */
div:hover{
-webkit-animation: mymove1 0.3s infinite;
animation: mymove1 0.3s infinite;
}
@-webkit-keyframes mymove1 {
0% {opacity: 1;}
100% {opacity: 1;}
}
@keyframes mymove1 {
0% {opacity: 1;}
100% {opacity: 1;}
}