The Power of Pure CSS - No JavaScript Needed

206

Home Pure CSS Logo Slider Responsive

By: pixeldev

html,
body {
  height: 100%;
  margin: 0px;
}

.slider-container {
  background: linear-gradient(
    149deg,
    rgb(247, 0, 255) 0%,
    rgb(255, 145, 0) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.slider {
  width: 100%;
  max-width: 600px;
  height: 400px;
  margin: 20px;
  text-align: center;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.slides {
  display: flex;
  overflow-x: scroll;
  position: relative;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.slide:nth-of-type(even) {
  background-color: rgb(250, 246, 212);
}

.slide {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  height: 400px;
  scroll-snap-align: center;
  margin-right: 0px;
  box-sizing: border-box;
  background: white;
  transform-origin: center center;
  transform: scale(1);
}

.slide__text {
  font-size: 40px;
  font-weight: bold;
  font-family: sans-serif;
}

.slide a {
  background: none;
  border: none;
}

a.slide__prev,
.slider::before {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  left: 5%;
}

a.slide__next,
.slider::after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  right: 5%;
}

.slider::before,
.slider::after,
.slide__prev,
.slide__next {
  position: absolute;
  top: 48%;
  width: 35px;
  height: 35px;
  border: solid black;
  border-width: 0 4px 4px 0;
  padding: 3px;
  box-sizing: border-box;
}

.slider::before,
.slider::after {
  content: "";
  z-index: 1;
  background: none;
  pointer-events: none;
}

.slider__nav {
  box-sizing: border-box;
  position: absolute;
  bottom: 5%;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  text-align: center;
}

.slider__navlink {
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: black;
  margin: 0 10px 0 10px;
}

.read-article{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 999;
  color: #000;
  background: white;
  padding: 10px 20px;
  border-radius: 10px;
  font-family: arial;
  text-decoration: none;
  box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px, rgb(0 0 0 / 30%) 0 0 60px -15px;
}
.read-article:hover{
    background: #d5d5d5;
    box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px, rgb(0 0 0 / 30%) 0 0 60px 0px;
}
iframe[sandbox] .read-article{
  display: none;
}

42

Pure CSS Slider – fullPage blog

By: pixeldev

<section id="slideshow">
			<div class="entire-content">
				<div class="content-carrousel">
					<figure class="shadow"><img src="https://images.pexels.com/photos/758733/pexels-photo-758733.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/21261/pexels-photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/567973/pexels-photo-567973.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/776653/pexels-photo-776653.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/54630/japanese-cherry-trees-flowers-spring-japanese-flowering-cherry-54630.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/131046/pexels-photo-131046.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/302515/pexels-photo-302515.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/301682/pexels-photo-301682.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/933054/pexels-photo-933054.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
		</div>
	</div>
</section>

/* 3D Slideshow */ 
* {
	margin: 0;
	padding: 0;
}

html, body {
	max-width: 100%;
	overflow-x: hidden;
	overflow-y: hidden;
	background-color: #6adecd;
}

#slideshow {
	margin: 0 auto;
	padding-top: 50px;
	height: 600px;
	width: 100%;
	background-color: #6adecd;
	box-sizing: border-box;
}

.slideshow-title {
	font-family: 'Allerta Stencil';
	font-size: 62px;
	color: #fff;
	margin: 0 auto;
	text-align: center;
	margin-top: 25%;
	letter-spacing: 3px;
	font-weight: 300;
}

.sub-heading {
	padding-top: 50px;
	font-size: 18px;
} .sub-heading-two {
	font-size: 15px;
} .sub-heading-three {
	font-size: 13px;
} .sub-heading-four {
	font-size: 11px;
} .sub-heading-five {
	font-size: 9px;
} .sub-heading-six {
	font-size: 7px;
} .sub-heading-seven {
	font-size: 5px;
} .sub-heading-eight {
	font-size: 3px;
} .sub-heading-nine {
	font-size: 1px;
}

.entire-content {
	margin: auto;
	width: 190px;
	perspective: 1000px;
	position: relative;
	padding-top: 80px;
}

.content-carrousel {
	width: 100%;
	position: absolute;
	float: right;
	animation: rotar 15s infinite linear;
	transform-style: preserve-3d;
}

.content-carrousel:hover {
	animation-play-state: paused;
	cursor: pointer;
}

.content-carrousel figure {
	width: 100%;
	height: 120px;
	border: 1px solid #3b444b;
	overflow: hidden;
	position: absolute;
}

.content-carrousel figure:nth-child(1) {
	transform: rotateY(0deg) translateZ(300px); 
} .content-carrousel figure:nth-child(2) {
	transform: rotateY(40deg) translateZ(300px); 
} .content-carrousel figure:nth-child(3) {
	transform: rotateY(80deg) translateZ(300px); 
} .content-carrousel figure:nth-child(4) {
	transform: rotateY(120deg) translateZ(300px); 
} .content-carrousel figure:nth-child(5) {
	transform: rotateY(160deg) translateZ(300px); 
} .content-carrousel figure:nth-child(6) {
	transform: rotateY(200deg) translateZ(300px); 
} .content-carrousel figure:nth-child(7) {
	transform: rotateY(240deg) translateZ(300px); 
} .content-carrousel figure:nth-child(8) {
	transform: rotateY(280deg) translateZ(300px); 
} .content-carrousel figure:nth-child(9) {
	transform: rotateY(320deg) translateZ(300px); 
} .content-carrousel figure:nth-child(10) {
	transform: rotateY(360deg) translateZ(300px); 
}

.shadow {
    position: absolute;
    box-shadow: 0px 0px 20px 0px #000;
    border-radius: 1px;
}

.content-carrousel img {
	image-rendering: auto;
	transition: all 300ms;
	width: 100%;
	height: 100%;
}

.content-carrousel img:hover {
	transform: scale(1.2);
	transition: all 300ms;
}

@keyframes rotar {
	from {
		transform: rotateY(0deg);
	} to {
		transform: rotateY(360deg);
	}
}

41

3D Slider | Pure CSS

By: pixeldev

body{
  background:-webkit-radial-gradient(circle,#f6b5ff, #e081ef);
  background:-moz-radial-gradient(circle,#f6b5ff, #e081ef);
  background:-ms-radial-gradient(circle,#f6b5ff, #e081ef);
  background:-o-radial-gradient(circle,#f6b5ff, #e081ef);
  background:radial-gradient(circle,#f6b5ff, #e081ef);
}
#slider{
  width:630px;
  border:4px solid #fff;;
  outline:1px solid #999;
  height:313px;
  margin:-315px auto;
  background:-webkit-radial-gradient(#ffefce, #fcd78d);
  background:-moz-radial-gradient(#ffefce, #fcd78d);
  background:-ms-radial-gradient(#ffefce, #fcd78d);
  background:-o-radial-gradient(#ffefce, #fcd78d);
  background:radial-gradient(#ffefce, #fcd78d);
}
#allpic{
  width:70px;
  height:300px;
  background:#ccc;
  margin:5px 0 0 5px;
  float:left;
  transition:all .5s ease-out;
  overflow:hidden;
  border:2px solid #fff;;
  outline:1px solid #999;
}
#allpic:hover {
  width:300px;
}
#shadow{
  width:600px;
  height:30px;
  margin:330px auto 0;
  border-radius:50%;
  box-shadow:0px 12px 10px 3px rgba(0,0,0, 0.5);
}

40

Pure CSS with no arrows

By: pixeldev

/* Use a static URL since SCSS variable and `unique_id()` can't be replicated in CSS */
main {
  font-family: Helvetica, Arial, sans-serif;
  max-width: 800px;
  margin: 10px auto;
}

main a {
  color: #a00;
}

main a:hover {
  text-decoration: none;
}

main h1 {
  font-size: 1.75em;
  font-weight: lighter;
  text-align: center;
}

main h3 {
  font-size: 1.2em;
  margin-bottom: 1em;
  color: #333;
  text-align: center;
}

main p {
  text-align: center;
  font-weight: bold;
}

.container {
  width: 400px;
  height: 400px;
  margin: 10px auto;
  border: solid 1px #ccc;
  background: url('https://loremflickr.com/400/400?t=static'); /* Simulated `unique_id()` */
}

.container div {
  filter: sepia(75%);
  height: 100%;
  width: 10%;
  max-width: 99%;
  resize: horizontal;
  box-sizing: border-box;
  overflow: auto;
  position: relative;
  animation-delay: 1s;
  animation-duration: 2s;
  animation-name: preview;
  background: url('https://loremflickr.com/400/400?t=static');
}

.container div::after {
  content: ' ';
  position: absolute;
  width: 1em;
  height: 1em;
  background: black;
  bottom: 0;
  right: 0;
  border: solid 1px white;
  border-right: 0;
  border-bottom: 0;
  cursor: col-resize;
}

@keyframes preview {
  0% {
    width: 10%;
  }
  50% {
    width: 90%;
  }
  100% {
    width: 10%;
  }
}

38

Javascriptless Before/After Slider

By: pixeldev

<div class="content">
  <div class="is-not-supported" role="alert">
    <p>Scroll-snap is not supported in your current browser. Supported browsers include Firefox version 39.</p>
  </div>
  <h1>Pure CSS Slider</h1>
  <p>This slider uses the css <code>scroll-snap</code> property as well as css styling for the scrollbar. Unfortunately, these two features have opposite browser support, so you will not see all the aspects of this pen in a single browser. You can learn more about the <code>scroll-snap</code>
  <div class="slider">
    <div class="slider-buttons">
      <a href="#slide-1">1</a>
      <a href="#slide-2">2</a>
      <a href="#slide-3">3</a>
      <a href="#slide-4">4</a>
    </div>
    <div class="slides">
      <div class="slide" id="slide-1">
        <p>This is the first slide. Scroll to the right to go to the next slide.</p>
      </div>
      <div class="slide" id="slide-2">
        <p>This is the second slide. Alternatively, change slides using the buttons at the top.</p>
      </div>
      <div class="slide" id="slide-3">
        <p>This is the third slide. You're getting the hang of it.</p>
      </div>
      <div class="slide" id="slide-4">
        <p>This is the last slide. Scroll back to the left if you're into that stuff.</p>
      </div>
    </div>
  </div>
</div>

/** Displays Warning if required property is not supported. **/
@supports (scroll-snap-type: mandatory) or (-webkit-scroll-snap-type: mandatory) {
  .is-not-supported {display: none;}
}

/** Generic Styling & Formatting **/
body * {box-sizing: border-box;}
body {
  margin: 0;
  font-family: helvetica, arial, sans-serif;
}
.content {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
}

/** Pure CSS Slider **/
.slider {
  position: relative;
  width: 100%;
  height: 350px;
  margin: 2rem auto;
  background: #ddd;
}
.slider .slides {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  /** Thank you Sergey! http://blog.gospodarets.com/css-scroll-snap/ **/
    scroll-snap-points-x: repeat(100%);
    scroll-behavior: smooth;
    scroll-snap-type: mandatory;
    font-size: 0;
  /** **/
}
.slider .slide {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.slider .slide p {
  position: absolute;
  display: block;
  bottom: 0; left: 0;
  width: 100%;
  font-size: 1rem;
  color: #000;
  background: rgba(0,0,0,0.15);
  padding: 1em;
  margin: 0;
  white-space: normal;
}
.slider #slide-1 {background: #afa;}
.slider #slide-2 {background: #ffa;}
.slider #slide-3 {background: #faa;}
.slider #slide-4 {background: #aff;}

.slider-buttons {
  position: absolute;
  top: 0; right: 0;
  width: 100%;
  height: auto;
  padding: 0.5rem;
  font-size: 1rem;
  text-align: right;
  z-index: 2;
}
.slider-buttons a {
  width: 2em;
  display: inline-block;
  background: rgba(0,0,0,0.15);
  text-align: center;
  padding: 0.5em 0;
  text-decoration: none;
  color: #000;
}

/** Chrome Scroll Wheel **/

::-webkit-scrollbar {
  height: 34px;
}
::-webkit-scrollbar-track {
  background: #eee;
}
::-webkit-scrollbar-thumb {
  background: #ddd url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/42863/grab.png) center no-repeat;
  background-size: 24px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
  position: absolute;
  top: 0;
  display: block;
  height: 34px;
  width: 34px;
  background: #ccc;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/42863/arrow2.png);
  background-size: 100%;
}
::-webkit-scrollbar-button:end:increment {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/42863/arrow.png);
}

/** Alert Box **/
.is-not-supported {
  width: 100%;
  margin: 2rem auto;
  background: #fda;
  padding: 1em;
}
.is-not-supported p {margin: 0;}

@media (max-width: 600px) {
  .content {width: 95%;}
}

37

Pure CSS Slider using Scroll-Snap

By: pixeldev

.ms-header {
  display: flex;
  align-items: center;
  justify-content: center; /* Fixed typo: 'jsutify-content' */
  font-family: sans-serif;

width: 100vw;
  height: 100vh;

background: linear-gradient(
    to right bottom,
    rgb(157, 215, 213),
    rgb(255, 135, 120) /* approximation of lighten(rgb(253, 115, 100), 10%) */
  );
}

.ms-header__title {
  flex: 1 1 100%;
  width: 100%;

text-align: center;
  font-size: 4rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
}

.ms-slider {
  display: inline-block;
  height: 1.5em;
  overflow: hidden;
  vertical-align: middle;

/* CSS3 does not support `mask-mode` and `mask-type` in most browsers */
  -webkit-mask-image: linear-gradient(to bottom, transparent, white, white, white, transparent);
  mask-image: linear-gradient(to bottom, transparent, white, white, white, transparent);
}

.ms-slider__words {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;

animation-name: wordSlider;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-duration: 7s;
}

.ms-slider__word {
  display: block;
  line-height: 1.3em;
  text-align: left;
}

@keyframes wordSlider {
  0%, 19% {
    transform: translateY(0%);
  }

25%, 44% {
    transform: translateY(-25%);
  }

50%, 69% {
    transform: translateY(-50%);
  }

75%, 94% {
    transform: translateY(-75%);
  }

100% {
    transform: translateY(-75%);
  }
}

37

CSS-only word slider

By: pixeldev

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #FFCC00;
}

@keyframes cursor {
  from, to { border-color: transparent; }
  50% { border-color: black; }
}

@keyframes typing {
  from { width: 100%; }
  90%, to { width: 0; }
}

@keyframes slide {
  33.3333% {
    font-size: 3rem;
    letter-spacing: 3px;
  }
  to {
    font-size: 0;
    letter-spacing: 0;
  }
}

.typing-slider {
  font-family: Consolas, monospace;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

.typing-slider p {
  position: relative;
  display: inline;
  font-size: 0;
  text-transform: uppercase;
  letter-spacing: 0;
  animation: slide 15s step-start infinite;
}

.typing-slider p::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border-left: 3px solid black;
  background-color: #FFCC00;
  animation: typing 5s infinite, cursor 1s infinite;
}

/* Slide 1 (16 characters) */
.typing-slider p:nth-child(1) {
  animation-delay: 0s;
}
.typing-slider p:nth-child(1)::after {
  animation-delay: 0s;
  animation-timing-function: steps(16), step-end;
}

/* Slide 2 (23 characters) */
.typing-slider p:nth-child(2) {
  animation-delay: 5s;
}
.typing-slider p:nth-child(2)::after {
  animation-delay: 5s;
  animation-timing-function: steps(23), step-end;
}

/* Slide 3 (12 characters) */
.typing-slider p:nth-child(3) {
  animation-delay: 10s;
}
.typing-slider p:nth-child(3)::after {
  animation-delay: 10s;
  animation-timing-function: steps(12), step-end;
}

32

Text slider with typing animation in pure CSS

By: pixeldev

html{
  background: #aaa; 
}

section{
  width: 200px;
  height: 200px;
  position: relative;
  left: 50%;
  top: 1em;
  margin-left: -100px;
  overflow: hidden;
  background: #292929;
  border: 10px solid #fff;
}

/*section:hover article{
  animation-play-state: paused;
}*/

article{
  position: absolute;
  left: 200px;
  background: #292929;
  color: #e3e3e3;
  width: 200px;
  height: 200px;
  text-align: center;
  font: 2em/1em sans-serif;
  border-box: box-sizing;
  padding-top: 80px;
}

article:nth-of-type(1){
  animation: slideIn 50s linear 0s infinite;
}
article:nth-of-type(2){
  animation: slideIn 50s linear 5s infinite;
}
article:nth-of-type(3){
  animation: slideIn 50s linear 10s infinite;
}
article:nth-of-type(4){
  animation: slideIn 50s linear 15s infinite;
}
article:nth-of-type(5){
  animation: slideIn 50s linear 20s infinite;
}
article:nth-of-type(6){
  animation: slideIn 50s linear 25s infinite;
}
article:nth-of-type(7){
  animation: slideIn 50s linear 30s infinite;
}
article:nth-of-type(8){
  animation: slideIn 50s linear 35s infinite;
}
article:nth-of-type(9){
  animation: slideIn 50s linear 40s infinite;
}
article:nth-of-type(10){
  animation: slideIn 50s linear 45s infinite;
}

@keyframes slideIn{
  0% {left: 200px;}
  1% {left: 0;}
  10% {left: 0;}
  11% {left: -200px;}
  100%{left: -200px;}
}

28

Pure CSS Image Slider

By: pixeldev

@import url(https://fonts.googleapis.com/css?family=Varela+Round);

html, body { background: #333 url("https://codepen.io/images/classy_fabric.png"); }

.slides {
    padding: 0;
    width: 609px;
    height: 420px;
    display: block;
    margin: 0 auto;
    position: relative;
}

.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.slides input { display: none; }

.slide-container { display: block; }

.slide {
    top: 0;
    opacity: 0;
    width: 609px;
    height: 420px;
    display: block;
    position: absolute;

transform: scale(0);

transition: all .7s ease-in-out;
}

.slide img {
    width: 100%;
    height: 100%;
}

.nav label {
    width: 200px;
    height: 100%;
    display: none;
    position: absolute;

opacity: 0;
    z-index: 9;
    cursor: pointer;

transition: opacity .2s;

color: #FFF;
    font-size: 156pt;
    text-align: center;
    line-height: 380px;
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container  .slide {
    opacity: 1;

transform: scale(1);

transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
	width: 100%;
	bottom: 9px;
	height: 11px;
	display: block;
	position: absolute;
	text-align: center;
}

.nav-dots .nav-dot {
	top: -5px;
	width: 11px;
	height: 11px;
	margin: 0 4px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover {
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.8);
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
	background: rgba(0, 0, 0, 0.8);
}

24

Slider

By: pixeldev

By: pixeldev

By: pixeldev

By: pixeldev

By: pixeldev

By: pixeldev

By: pixeldev

By: pixeldev

By: pixeldev

By: Nethan Pogi