Блог программиста

Стильный CSS эффект для фотографии. Если навести мышкой на фото, то оно как бы «просканируется рентгеном». HTML разметка CSS оформление #rentgen .c{position:relative;width:90vmin;height:calc(90vmin * 9 / 16);margin:auto;overflow:hidden;box-shadow:0 1.25em 1em -.5em #0005} #rentgen .i{width:100%;height:100%;background-color:#000} #rentgen .img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:0 50%;object-position:0 50%;transition:-webkit-transform 1s;transition:transform 1s;transition:transform 1s,-webkit-transform 1s} #rentgen .c:hover .img{-webkit-transform:translateX(-3%);transform:translateX(-3%);transition-duration:5s} :root{—s1-w:40vmin;—s2-w:60vmin;—s3-w:10vmin} @-webkit-keyframes move-x { 50%{-webkit-transform:translateX(var(—x1));transform:translateX(var(—x1))} 100%{-webkit-transform:translateX(var(—x2));transform:translateX(var(—x2))} } @keyframes move-x { 50%{-webkit-transform:translateX(var(—x1));transform:translateX(var(—x1))} 100%{-webkit-transform:translateX(var(—x2));transform:translateX(var(—x2))} …

Читать далее

Стильный CSS эффект для текста. Анимация выпрыгивающих вперед слов. Используется мультяшный шрифт «Luckiest Guy». HTML разметка CSS оформление @import «https://fonts.googleapis.com/css?family=Luckiest+Guy&display;=swap»; #mult_text{background:radial-gradient(circle,#fffc00 0%,#f0ed17 100%);height:100%;display:flex;justify-content:center;align-items:center;font-family:»Luckiest Guy»,cursive} #mult_text h1{margin:0;font-size:8em;padding:0;color:#fff;text-shadow:0 .1em 20px black,.05em -.03em 0 black,.05em .005em 0 black,0 .08em 0 black,.05em .08em 0 black,0 -.03em 0 black,-.03em -.03em 0 black,-.03em .08em 0 black,-.03em 0 0 #000} #mult_text h1 …

Читать далее

HTML разметка CSS оформление #button-design .b-green,#button-design .b-green:before{background:#499bea;background:-moz-linear-gradient(45deg,#499bea 0,#1abc9c 100%);background:-webkit-gradient(left bottom,right top,color-stop(0,#499bea),color-stop(100%,#1abc9c));background:-webkit-linear-gradient(45deg,#499bea 0,#1abc9c 100%);background:-o-linear-gradient(45deg,#499bea 0,#1abc9c 100%);background:-ms-linear-gradient(45deg,#499bea 0,#1abc9c 100%);background:linear-gradient(45deg,#499bea 0,#1abc9c 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#499bea’,endColorstr=’#1abc9c’,GradientType=1)} #button-design .button{display:inline-block;position:relative;border-radius:3px;text-decoration:none;padding:.5em;margin:.5em;font-size:2em;font-weight:700;transition:all .5s;-webkit-background-clip:text;-webkit-text-fill-color:transparent} #button-design .button:hover{text-shadow:0 0 0 rgba(255,255,255,.75)} #button-design .button:hover:after{left:100%;top:100%;bottom:100%;right:100%} #button-design .button:before{content:»;display:block;position:absolute;left:0;top:0;bottom:0;right:0;z-index:-1;border-radius:5px;transition:all .5s} #button-design .button:after{content:»;display:block;position:absolute;left:2px;top:2px;bottom:2px;right:2px;z-index:-1;border-radius:5px;transition:all .5s;background:#fff} HTML разметка CSS оформление #button-design .b-pink,#button-design .b-pink:before{background:#e748ea;background:-moz-linear-gradient(45deg,#e748ea 0,#4b1abc 100%);background:-webkit-gradient(left bottom,right top,color-stop(0,#e748ea),color-stop(100%,#4b1abc));background:-webkit-linear-gradient(45deg,#e748ea 0,#4b1abc 100%);background:-o-linear-gradient(45deg,#e748ea 0,#4b1abc 100%);background:-ms-linear-gradient(45deg,#e748ea 0,#4b1abc 100%);background:linear-gradient(45deg,#e748ea 0,#4b1abc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#e748ea’,endColorstr=’#4b1abc’,GradientType=1)} #button-design …

Читать далее

Красивая кнопка со сдвоенной рамкой, которая при наведении трансформируется в единое целое. Просто и со вкусом HTML разметка CSS оформление .min-b { height: 300px; display: flex; justify-content: center; align-items: center; background: #FAFAFA; } .min-b button { padding: 20px 40px; background: none; border: none; position: relative; text-transform: uppercase; font-weight: bold; letter-spacing: 3px; cursor: pointer; } .min-b …

Читать далее

ВСЕ СЛАЙДЕРЫ В ПРИМЕРАХ РАБОТАЮТ БЕЗ СКРИПТОВ. Для установки любого слайдера на свой сайт нужно скопировать HTML разметку и CSS: Пример 1: Маленький слайдер с автоматической прокруткой фото Это самый простой слайдер без возможности самостоятельного скроллинга фотографий. Рекомендуемый размер изображений 500x300px. HTML разметка CSS оформление .container_slider_css{margin:50px auto;width:500px;height:300px;overflow:hidden;position:relative} .photo_slider_css{position:absolute;animation:round 16s infinite;opacity:0;width:100%} @keyframes round { 25%{opacity:1} 40%{opacity:0} …

Читать далее