Sheet Slider, slider responsive usando solo CSS3
How do I make an sheet slider, slider responsive usando solo css3?
What is a sheet slider, slider responsive usando solo css3? How do you make a sheet slider, slider responsive usando solo css3? This script and codes were developed by Angel Komander on 17 October 2022, Monday.
Sheet Slider, slider responsive usando solo CSS3 Previews
Sheet Slider, slider responsive usando solo CSS3 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sheet Slider, slider responsive usando solo CSS3</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--Sheet Slider-->
<div class="sheet-slider" id="sh-cinco"> <input id="s1" class="slide" type="radio" name="slide" checked="checked"/> <input id="s2" class="slide" type="radio" name="slide"/> <input id="s3" class="slide" type="radio" name="slide"/> <input id="s4" class="slide" type="radio" name="slide"/> <input id="s5" class="slide" type="radio" name="slide"/> <div class="conten"> <div class="tab"> <img src="https://3.bp.blogspot.com/-gRdzR7Jl2ow/U-7fmHQe1nI/AAAAAAAAAlc/i-tftNWfBFk/s1000/slide-img01.jpg"/> <div class="text"> <h3>2 Weeks</h3> <span>Titulo segundario mas un <a href="#">link</a></span> </div> </div> <div class="tab"> <img src="https://3.bp.blogspot.com/-gRdzR7Jl2ow/U-7fmHQe1nI/AAAAAAAAAlc/i-tftNWfBFk/s1000/slide-img02.jpg"/> <div class="text"> <h3>Artwork surreal</h3> <span>Titulo segundario, solo texto</span> </div> </div> <div class="tab"> <img src="https://3.bp.blogspot.com/-gRdzR7Jl2ow/U-7fmHQe1nI/AAAAAAAAAlc/i-tftNWfBFk/s1000/slide-img03.jpg"/> <div class="text"> <h3>Field with church</h3> <span>Titulo segundario, solo texto</span> </div> </div> <div class="tab"> <img src="https://3.bp.blogspot.com/-gRdzR7Jl2ow/U-7fmHQe1nI/AAAAAAAAAlc/i-tftNWfBFk/s1000/slide-img04.jpg"/> <div class="text"> <h3>Beautiful Girl</h3> <span>Titulo segundario mas un <a href="#">link</a></span> </div> </div> <div class="tab"> <img src="https://3.bp.blogspot.com/-gRdzR7Jl2ow/U-7fmHQe1nI/AAAAAAAAAlc/i-tftNWfBFk/s1000/slide-img05.jpg"/> <div class="text"> <h3>Cat and Girl</h3> <span>Titulo segundario, solo texto</span> </div> </div> </div> <div class="sh-btns"> <label for="s1"></label> <label for="s2"></label> <label for="s3"></label> <label for="s4"></label> <label for="s5"></label> </div>
</div>
</body>
</html>Sheet Slider, slider responsive usando solo CSS3 - Script Codes CSS Codes
@charset "utf-8";
/* CSS Document */
/*-- *Autor: Daniel Abel para +ZKreations *fecha de desarrollo: 15/08/2014 *Under Creative Commons Attribution 3.0 License *http://creativecommons.org/licenses/by/3.0/
--*/
div.sheet-slider { background-color:#444; overflow:hidden; width:100%; margin:0 auto; position:relative;
}
/*Animacion*/
div.sheet-slider, div.conten, div.sheet-slider div.tab .text h3 { transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; -ms-transition: all 0.4s ease-in-out 0s; -o-transition: all 0.4s ease-in-out 0s; -webkit-transition: all 0.4s ease-in-out 0s;
}
.text{ transition: all 0.5s ease-in-out 0.3s; -moz-transition: all 0.5s ease-in-out 0.3s; -webkit-transition: all 0.5s ease-in-out 0.3s; -o-transition: all 0.5s ease-in-out 0.3s; -ms-transition: all 0.5s ease-in-out 0.3s;
}
/**/
/*Reset css (slider)*/
div.sheet-slider input {display: none;}
div.sheet-slider div.tab img {width: 100%;}
div.sheet-slider div.tab {line-height:0;display:block;}
div.sheet-slider .sh-btns {font-size: 1px;letter-spacing: -1px;}
div.sheet-slider .sh-btns label {word-spacing: normal;white-space: normal;letter-spacing: normal;font-size: 2rem;}
div.sheet-slider div.text a {color: #0ab4d8;font-weight: bold;text-decoration: none;}
div.sheet-slider div.text a:hover {color: #29d3f7;text-decoration: none;}
div.text, .text h3, .text span {color:#fff;}
div.sheet-slider, .sh-btns label, div.tab img { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; /*no hay soporte para las siguientes propiedades pero igual las incluyo*/ -o-user-select: none; user-select: none;
}
/**/
div.sheet-slider .sh-btns { bottom: 0; left: 0; position: absolute; text-align: center; width: 100%; z-index: 700;
}
div.sheet-slider .sh-btns label { background-color: rgba(255, 255, 255, 0.5); cursor: pointer; display: inline-block; height: 6px; margin-right: 1px; width: 85%;
}
div.sheet-slider .sh-btns label:hover { background-color: rgba(255, 255, 255, 0.8);
}
#sh-dos .sh-btns label {width: 42.4%;}
#sh-tres .sh-btns label {width: 28.28%;}
#sh-cuatro .sh-btns label {width: 21.2%;}
#sh-cinco .sh-btns label {width: 16.9%;}
#sh-seis .sh-btns label {width: 14.1%;}
#sh-siete .sh-btns label {width: 12.06%;}
#sh-ocho .sh-btns label {width: 10.55%;}
#sh-nueve .sh-btns label {width: 9.36%;}
#sh-diez .sh-btns label {width: 8.42%;}
#sh-once .sh-btns label {width: 7.64%;}
#sh-doce .sh-btns label {width: 7%;}
div.sheet-slider div.tab .text { font-size: 16px; font-family: helvetica,arial; left: 4%; line-height: 1.4; position: absolute; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.85); top: 14%; opacity: 0;
}
div.sheet-slider div.tab .text h3 {font-size: 34px;margin: 0;}
div.sheet-slider div.conten {width:100%;position:relative;z-index: 600;}
div.sheet-slider div.conten div.tab {float: left;position: relative;width: 100%;}
#sh-dos div.conten {width:200%;}
#sh-tres div.conten {width:300%;}
#sh-cuatro div.conten {width:400%;}
#sh-cinco div.conten {width:500%;}
#sh-seis div.conten {width:600%;}
#sh-siete div.conten {width:700%;}
#sh-ocho div.conten {width:800%;}
#sh-nueve div.conten {width:900%;}
#sh-diez div.conten {width:1000%;}
#sh-once div.conten {width:1100%;}
#sh-doce div.conten {width:1200%;}
#sh-dos div.conten div.tab {width:50%;}
#sh-tres div.conten div.tab {width:33.333%;}
#sh-cuatro div.conten div.tab {width:25%;}
#sh-cinco div.conten div.tab {width:20%;}
#sh-seis div.conten div.tab {width:16.666%;}
#sh-siete div.conten div.tab {width:14.285%;}
#sh-ocho div.conten div.tab {width:12.5%;}
#sh-nueve div.conten div.tab {width:11.111%;}
#sh-diez div.conten div.tab {width:10%;}
#sh-once div.conten div.tab {width:9.090%;}
#sh-doce div.conten div.tab {width:8.333%;}
.slide:nth-child(1):checked ~ div.conten {margin-left:0;}
.slide:nth-child(2):checked ~ div.conten {margin-left:-100%;}
.slide:nth-child(3):checked ~ div.conten {margin-left:-200%;}
.slide:nth-child(4):checked ~ div.conten {margin-left:-300%;}
.slide:nth-child(5):checked ~ div.conten {margin-left:-400%;}
.slide:nth-child(6):checked ~ div.conten {margin-left:-500%;}
.slide:nth-child(7):checked ~ div.conten {margin-left:-600%;}
.slide:nth-child(8):checked ~ div.conten {margin-left:-700%;}
.slide:nth-child(9):checked ~ div.conten {margin-left:-800%;}
.slide:nth-child(10):checked ~ div.conten {margin-left:-900%;}
.slide:nth-child(11):checked ~ div.conten {margin-left:-1000%;}
.slide:nth-child(12):checked ~ div.conten {margin-left:-1100%;}
#s1:checked ~ div.conten div.tab:nth-child(1) .text,
#s2:checked ~ div.conten div.tab:nth-child(2) .text,
#s3:checked ~ div.conten div.tab:nth-child(3) .text,
#s4:checked ~ div.conten div.tab:nth-child(4) .text,
#s5:checked ~ div.conten div.tab:nth-child(5) .text,
#s6:checked ~ div.conten div.tab:nth-child(6) .text,
#s7:checked ~ div.conten div.tab:nth-child(7) .text,
#s8:checked ~ div.conten div.tab:nth-child(8) .text,
#s9:checked ~ div.conten div.tab:nth-child(9) .text,
#s10:checked ~ div.conten div.tab:nth-child(10) .text,
#s11:checked ~ div.conten div.tab:nth-child(11) .text,
#s12:checked ~ div.conten div.tab:nth-child(12) .text{ opacity:1; top: 8%;
}
#s1:checked ~ div.sh-btns label:nth-child(1),
#s2:checked ~ div.sh-btns label:nth-child(2),
#s3:checked ~ div.sh-btns label:nth-child(3),
#s4:checked ~ div.sh-btns label:nth-child(4),
#s5:checked ~ div.sh-btns label:nth-child(5),
#s6:checked ~ div.sh-btns label:nth-child(6),
#s7:checked ~ div.sh-btns label:nth-child(7),
#s8:checked ~ div.sh-btns label:nth-child(8),
#s9:checked ~ div.sh-btns label:nth-child(9),
#s10:checked ~ div.sh-btns label:nth-child(10),
#s11:checked ~ div.sh-btns label:nth-child(11),
#s12:checked ~ div.sh-btns label:nth-child(12){ background-color: #0ab4d8; box-shadow: 0 0 4px #1dc7eb;
}
@media only screen and (max-width: 400px) {
div.sheet-slider div.tab .text h3 { font-size: 20px; margin: 0;
}
}
/*Personalizar*/
div.sheet-slider { max-width: 1000px; max-height: 400px;
}
| Developer | Angel Komander |
| Username | AngelKrak |
| Uploaded | October 17, 2022 |
| Rating | 3.5 |
| Size | 3,218 Kb |
| Views | 28,336 |
Do you need developer help for Sheet Slider, slider responsive usando solo CSS3?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Angel Komander (AngelKrak) Script Codes
| Name | Size |
| 3D cube with reflection | 1,983 Kb |
| Spoiler JS Dynamic Spoiler Button | 1,540 Kb |
| Toggle CSS Spoiler button | 1,728 Kb |
| HTML5 Video Antes y Despues Comparacion Slider | 2,370 Kb |
| 360 Degree Product Viewer in HTML5 Canvas | 3,218 Kb |
| Efecto Particulas By AngelKrak | 1,534 Kb |
| Animated Content Tabs with CSS3 | 4,486 Kb |
| Vertical Scrollbars CSS DIV | 2,521 Kb |
| Optimizing jQuery Spoiler Button | 1,862 Kb |
| Slider - CSS3 image slider with stylized thumbnails | 2,458 Kb |
Create amazing sales emails with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Sass Radar | Jlong | 6,887 Kb |
| RWD Conversion Practice | Jxqr97 | 2,743 Kb |
| Angular Sandbox | Alexgurrola | 1,616 Kb |
| Loading animation with css | Icebob | 2,947 Kb |
| Product item | Mymahesh11 | 2,256 Kb |
| Save for later... | Victorfreire | 1,359 Kb |
| Spin | Elalemanyo | 8,262 Kb |
| Classy Blockquote Styling | Andrewwright | 3,212 Kb |
| Scarlett Johansson Tribute Page | Diomed | 3,233 Kb |
| The Walking Raymarcher | Xorxor_hu | 7,934 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!