Log in
Start Coding
All
Accordion
border
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
All
<ul class="nav"> <li> <a href="#">Item 1</a> <ul> <li><a href="#">Sub item 1</a></li> <li><a href="#">Sub item 2</a></li> <li><a href="#">Sub item 3</a></li> <li><a href="#">Sub item 4</a></li> </ul> </li> <li> <a href="#">Item 2</a> <ul> <li><a href="#">Sub item 5</a></li> <li><a href="#">Sub item 6</a></li> <li><a href="#">Sub item 7</a></li> <li><a href="#">Sub item 8</a></li> </ul> </li> <li> <a href="#">Item 3</a> <ul> <li><a href="#">Sub item 9</a></li> <li><a href="#">Sub item 10</a></li> <li><a href="#">Sub item 11</a></li> <li><a href="#">Sub item 12</a></li> </ul> </li> <li> <a href="#">Item 4</a> <ul> <li><a href="#">Sub item 13</a></li> <li><a href="#">Sub item 14</a></li> <li><a href="#">Sub item 15</a></li> <li><a href="#">Sub item 16</a></li> </ul> </li> </ul>
.nav { background: #007; display: block; height: 36px; width: 100%; } .nav > li { display: inline-block; position: relative; } .nav > li > ul { background: #777; display: none; height: auto; position: absolute; top: 36px; width: 200%; } .nav > li:hover > ul { display: block; } .nav > li li { display: block; } a { color: #fff; display: block; padding: 10px 15px; text-decoration: none; } a:hover { background: #A00; }
74
Pure CSS Nav Menu challenge
By:
pixeldev
<!-- Heading --> <h1 class="heading1">Our Partners</h1> <!-- rc-carousel wrapper, set total tiles count including duplicate items --> <div class="rc-carousel" style="--tiles: 18"> <!-- rc-carousel-strip animation --> <div class="rc-carousel-strip"> <!-- Flexbox --> <div class="rc-carousel-box"> <!-- Items start --> <div class="rc-carousel-item"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/df6a77389d/dhl-with-white-bg.svg" alt="dhl" /> </div> <div class="rc-carousel-item"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b3ddb46ffd/fedex.svg" alt="fedex" /> </div> <div class="rc-carousel-item"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/13b7cfbff0/ups.svg" alt="ups" /> </div> <div class="rc-carousel-item"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/bed370f7c7/upsp.svg" alt="upsp" /> </div> <div class="rc-carousel-item"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/3d19ae9058/ems.svg" alt="ems" /> </div> <div class="rc-carousel-item"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/0a2ea7112b/dpd.svg" alt="dpd" /> </div> <div class="rc-carousel-item"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/fe62ffeb3c/gls.svg" alt="gls" /> </div> <div class="rc-carousel-item"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/863af19f44/auspost.svg" alt="auspost" /> </div> <div class="rc-carousel-item"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b546bbfc89/dsv.svg" alt="dsv" /> </div> <!-- Items end --> <!-- Duplicate items start, for infinite loop --> <div class="rc-carousel-item" aria-hidden="true"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/df6a77389d/dhl-with-white-bg.svg" alt="dhl" /> </div> <div class="rc-carousel-item" aria-hidden="true"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b3ddb46ffd/fedex.svg" alt="fedex" /> </div> <div class="rc-carousel-item" aria-hidden="true"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/13b7cfbff0/ups.svg" alt="ups" /> </div> <div class="rc-carousel-item" aria-hidden="true"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/bed370f7c7/upsp.svg" alt="upsp" /> </div> <div class="rc-carousel-item" aria-hidden="true"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/3d19ae9058/ems.svg" alt="ems" /> </div> <div class="rc-carousel-item" aria-hidden="true"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/0a2ea7112b/dpd.svg" alt="dpd" /> </div> <div class="rc-carousel-item" aria-hidden="true"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/fe62ffeb3c/gls.svg" alt="gls" /> </div> <div class="rc-carousel-item" aria-hidden="true"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/863af19f44/auspost.svg" alt="auspost" /> </div> <div class="rc-carousel-item" aria-hidden="true"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b546bbfc89/dsv.svg" alt="dsv" /> </div> <!-- Duplicate items end --> </div> <!-- Flexbox ends --> </div> <!-- rc-carousel-strip ends --> </div> <!-- rc-carousel wrapper ends --> <!-- rc-carousel wrapper, set total tiles count including duplicate items --> <div class="rc-carousel" style="--tiles: 18"> <!-- rc-carousel-strip animation --> <div class="rc-carousel-strip reverse"> <!-- Flexbox --> <div class="rc-carousel-box"> <!-- Items start --> <div class="rc-carousel-item"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/82b708d5db/shopify.svg" alt="shopify" /> </div> <div class="rc-carousel-item"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b75563ee5a/shopify-plus.svg" alt="shopify plus" /> </div> <div class="rc-carousel-item"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/c07c101b92/woocommerce.svg" alt="woocommerce" /> </div> <div class="rc-carousel-item"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/8a1255c93e/bigcommerce.svg" alt="bigcommerce" /> </div> <div class="rc-carousel-item"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/7959054e28/salesforce.svg" alt="salesforce" /> </div> <div class="rc-carousel-item"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/a6a0e2c3a1/magento.svg" alt="magento" /> </div> <div class="rc-carousel-item"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/ab24f45c43/squarespace.svg" alt="squarespace" /> </div> <div class="rc-carousel-item"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/792acd8fce/ebay.svg" alt="ebay" /> </div> <div class="rc-carousel-item"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/6be94a6145/amazon.svg" alt="amazon" /> </div> <!-- Items end --> <!-- Duplicate items start, for infinite loop --> <div class="rc-carousel-item" aria-hidden="true"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/82b708d5db/shopify.svg" alt="shopify" /> </div> <div class="rc-carousel-item" aria-hidden="true"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/b75563ee5a/shopify-plus.svg" alt="shopify plus" /> </div> <div class="rc-carousel-item" aria-hidden="true"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/c07c101b92/woocommerce.svg" alt="woocommerce" /> </div> <div class="rc-carousel-item" aria-hidden="true"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/8a1255c93e/bigcommerce.svg" alt="bigcommerce" /> </div> <div class="rc-carousel-item" aria-hidden="true"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/7959054e28/salesforce.svg" alt="salesforce" /> </div> <div class="rc-carousel-item" aria-hidden="true"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/a6a0e2c3a1/magento.svg" alt="magento" /> </div> <div class="rc-carousel-item" aria-hidden="true"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/ab24f45c43/squarespace.svg" alt="squarespace" /> </div> <div class="rc-carousel-item" aria-hidden="true"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/792acd8fce/ebay.svg" alt="ebay" /> </div> <div class="rc-carousel-item" aria-hidden="true"> <img class="rc-carousel-item-image" src="https://a.storyblok.com/f/79434/x/6be94a6145/amazon.svg" alt="amazon" /> </div> <!-- Duplicate items end --> </div> <!-- Flexbox ends --> </div> <!-- rc-carousel-strip ends --> </div> <!-- rc-carousel wrapper ends -->
/* * Prefixed by https://autoprefixer.github.io * PostCSS: v8.4.14, * Autoprefixer: v10.4.7 * Browsers: last 4 versions */ /* Base css */ html { font-size: 80%; } body { --body-bg: #eee; margin: 0; padding: 2rem 2rem 4rem; background: var(--body-bg); color: #212121; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem; line-height: 1.5; font-weight: normal; } *, ::before, ::after { -webkit-box-sizing: border-box; box-sizing: border-box; } h1, h2, h3, h4, h5, h6, p { margin: 0; } @media screen and (min-width: 768px) { html { font-size: 100%; } } @media screen and (min-width: 1920px) { html { font-size: 125%; } } @media screen and (min-width: 2560px) { html { font-size: 150%; } } /* Heading */ .heading1 { font-size: 2rem; text-align: center; } /* reference */ .reference { text-align: center; } /* reference link */ .reference-link { font-size: 1.25rem; font-weight: 600; } /* Carousel and animation css starts */ .rc-carousel { --box-gap: 1.5rem; --tile-size: 8rem; width: 100%; max-width: calc( (var(--tile-size) + var(--box-gap)) * ((var(--tiles) / 2) - 1) ); margin: var(--box-gap) auto; overflow: hidden; position: relative; z-index: 10; } .rc-carousel::before, .rc-carousel::after { content: ""; position: absolute; top: 0; width: 5rem; height: 100%; background-image: -webkit-gradient( linear, , from(transparent), to(var(--body-bg)) ); background-image: -o-linear-gradient( var(--direction), transparent, var(--body-bg) ); background-image: linear-gradient( to var(--direction), transparent, var(--body-bg) ); z-index: inherit; } .rc-carousel::before { left: 0; --direction: left; } .rc-carousel::after { right: 0; --direction: right; } .rc-carousel-strip { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; -webkit-animation: slideX 20s linear infinite; animation: slideX 20s linear infinite; } .rc-carousel-strip.reverse { /* reverse animation */ animation-direction: reverse; } .rc-carousel-strip:hover { -webkit-animation-play-state: paused; animation-play-state: paused; } .rc-carousel-box { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; gap: var(--box-gap); } .rc-carousel-item { -ms-flex-negative: 0; flex-shrink: 0; width: var(--tile-size); height: var(--tile-size); } .rc-carousel-item-image { display: block; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; -o-object-position: center; object-position: center; } @-webkit-keyframes slideX { 100% { -webkit-transform: translateX(0); transform: translateX(0); } 0% { -webkit-transform: translateX( calc(-1 * (var(--tile-size) + var(--box-gap)) * (var(--tiles) / 2)) ); transform: translateX( calc(-1 * (var(--tile-size) + var(--box-gap)) * (var(--tiles) / 2)) ); } } @keyframes slideX { 100% { -webkit-transform: translateX(0); transform: translateX(0); } 0% { -webkit-transform: translateX( calc(-1 * (var(--tile-size) + var(--box-gap)) * (var(--tiles) / 2)) ); transform: translateX( calc(-1 * (var(--tile-size) + var(--box-gap)) * (var(--tiles) / 2)) ); } } /* Animation won't work if you preferes reduced motion */ @media (prefers-reduced-motion) { /* styles to apply if a user's device settings are set to reduced motion */ .rc-carousel::before, .rc-carousel::after { display: none; } .rc-carousel-box { flex-wrap: wrap; justify-content: center; } .rc-carousel-box [aria-hidden="true"] { display: none; } .rc-carousel-strip { animation: none; } } /* reduced motion css ends */ /* Carousel and animation css ends */ /* Footer and credits styles */ .footer { position: fixed; z-index: 99; width: 100%; bottom: 0; left: 0; padding: 1rem; background: #fff; font-size: 0.75rem; text-align: right; font-weight: 600; }
74
Continuous infinite Animation Image carousel – Pure CSS
By:
pixeldev
<div class="textContainer"> <h1 class="d_f bouncingAnim"> <span>T</span> <span>R</span> <span>A</span> <span>I</span> <span>N</span> <span>I</span> <span>N</span> <span>G</span> <!-- Training --> </h1> </div>
body { font-family: 'Montserrat', sans-serif; } .textContainer { width: 100%; height: 100vh; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; } h1 { position: relative; text-transform: uppercase; font-size: 50px; letter-spacing: 2px; margin-bottom: 20px; color: red; justify-content: center; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } span { display: inline-block; position: relative; } .bouncingAnim { justify-content: center; align-items: flex-end; } .bouncingAnim span.ml_25 {margin-left: 25px;} .bouncingAnim span:nth-child(1) {animation: bounce 2.3s ease-in-out infinite; } .bouncingAnim span:nth-child(2) {animation: bounce 2.3s ease-in-out .33s infinite; } .bouncingAnim span:nth-child(3) {animation: bounce 2.3s ease-in-out 0.66s infinite; } .bouncingAnim span:nth-child(4) {animation: bounce 2.3s ease-in-out 0.99s infinite; } .bouncingAnim span:nth-child(5) {animation: bounce 2.3s ease-in-out 1.33s infinite; } .bouncingAnim span:nth-child(6) {animation: bounce 2.3s ease-in-out 1.66s infinite; } .bouncingAnim span:nth-child(7) {animation: bounce 2.3s ease-in-out 1.99s infinite; } .bouncingAnim span:nth-child(8) {animation: bounce 2.3s ease-in-out 2.33s infinite; } .bouncingAnim span:nth-child(9) {animation: bounce 2.3s ease-in-out 2.66s infinite; } .bouncingAnim span:nth-child(10) {animation: bounce 2.3s ease-in-out 2.99s infinite; } @-webkit-keyframes bounce{ 0%, 75%, 100%{ -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; } 25%{ -webkit-transform: translateY(-7px); -ms-transform: translateY(-7px); -o-transform: translateY(-7px); transform: translateY(-7px); opacity: .5; } } @keyframes bounce{ 0%, 75%, 100%{ -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; } 25%{ -webkit-transform: translateY(-7px); -ms-transform: translateY(-7px); -o-transform: translateY(-7px); transform: translateY(-7px); opacity: .5; } }
74
Wave Text Animation Pure CSS
By:
pixeldev
<section> <div class="box"> <div class="item"></div> </div> <div class="box"> <div class="item reverse"></div> </div> <div class="box"> <div class="item alternate"></div> </div> <div class="box"> <div class="item alternate-reverse"></div> </div> </section>
*{ margin: 0; box-sizing: border-box; } .box{ height: 80px; width: 100%; border-bottom: 1px solid gray; display: flex; align-items: center; } .item{ height: 60px; width: 60px; border-radius: 50%; background-color: #00005e; animation: move 2s 0s infinite ease-in-out; } section { padding: 10px 20px; width: 100%; background-color: black; } @keyframes move { /* 0%{ transform: translateX(0%); } */ 100%{ transform: translateX(600px); } } .reverse{ animation-direction: reverse; } .alternate{ animation-direction: alternate; } .alternate-reverse{ animation-direction: alternate-reverse; }
74
Simple Slide Animation
By:
pixeldev
<a href="#">Button</a>
body { margin: 0; padding: 0; /* background: #262626;*/ font-family: verdana; box-sizing: border-box; } a { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-decoration: none; text-transform: uppercase; background: #262626; width: 150px; height: 60px; line-height: 60px; color: #FFF; padding: 0px 10px; letter-spacing: 5px; text-align: center; font-size: 20px; transition: 0.5; overflow: hidden; } a:before { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 0; /* background: #F00;*/ z-index: -1; transition: 1s; border-style: solid; border-color: #F00; border-width: 80px 100px; transform: rotate(360deg); transform-origin: top left } a:hover:before { border-color: #00F; transform: rotate(40deg) } a:hover { color: #ff0; transition: 0.5s; transition-delay: 0.3s; }
74
Button Hover Effect
By:
pixeldev
<div class="container"> <h1>Text</h1> <div class="block"> <div class="p-container"> <p class="img-p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non fuga, vero ea enim. Nemo voluptas culpa temporibus eius quae sunt. </p> </div> </div> <!-- block --> <div class="block"> <div class="p-container"> <p class="img-p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non fuga, vero ea enim. Nemo voluptas culpa temporibus eius quae sunt. </p> </div> </div> <!-- block --> <div class="block"> <div class="p-container"> <p class="img-p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non fuga, vero ea enim. Nemo voluptas culpa temporibus eius quae sunt. </p> </div> </div> <!-- block --> <div class="block"> <div class="p-container"> <p class="img-p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non fuga, vero ea enim. Nemo voluptas culpa temporibus eius quae sunt. </p> </div> </div> <!-- block --> <div class="block"> <div class="p-container"> <p class="img-p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non fuga, vero ea enim. Nemo voluptas culpa temporibus eius quae sunt. </p> </div> </div> <!-- block --> </div> <div class="container"> <h1>Images</h1> <div class="block image"> <div class="layer"></div> <div class="p-container"> <p class="img-p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non fuga, vero ea enim. Nemo voluptas culpa temporibus eius quae sunt. </p> </div> </div> <!-- block --> <div class="block image"> <div class="layer"></div> <div class="p-container"> <p class="img-p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non fuga, vero ea enim. Nemo voluptas culpa temporibus eius quae sunt. </p> </div> </div> <!-- block --> <div class="block image"> <div class="layer"></div> <div class="p-container"> <p class="img-p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non fuga, vero ea enim. Nemo voluptas culpa temporibus eius quae sunt. </p> </div> </div> <!-- block --> <div class="block image"> <div class="layer"></div> <div class="p-container"> <p class="img-p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non fuga, vero ea enim. Nemo voluptas culpa temporibus eius quae sunt. </p> </div> </div> <!-- block --> <div class="block image"> <div class="layer"></div> <div class="p-container"> <p class="img-p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non fuga, vero ea enim. Nemo voluptas culpa temporibus eius quae sunt. </p> </div> </div> <!-- block --> </div> <!-- container --> <a href="https://codepen.io/tonkec" class="ua" target="_blank"> <i class="fa fa-user"></i></a>
html, body { @import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700); padding: 0; margin: 0; width: 100%; height: 100%; background-color: #2B2D42; font-family: 'Open Sans Condensed', sans-serif; } .container { position: relative; margin-top: 100px; width: 100%; text-align: center; } .block { width: 10%; height: 300px; display: inline-block; background-color: #E83F6F; cursor: pointer; position: relative; -webkit-transition: width .5s ease-in-out, background-color .5s ease-in-out; -moz-transition: width .5s ease-in-out, background-color .5s ease-in-out; -ms-transition: width .5s ease-in-out, background-color .5s ease-in-out; -o-transition: width .5s ease-in-out, background-color .5s ease-in-out; transition: width .5s ease-in-out, background-color .5s ease-in-out; text-align: center; } .block:hover { background-color: #2274A5; width: 30%; -webkit-transition: width .5s ease-in-out, background-color .5s ease-in-out; -moz-transition: width .5s ease-in-out, background-color .5s ease-in-out; -ms-transition: width .5s ease-in-out, background-color .5s ease-in-out; -o-transition: width .5s ease-in-out, background-color .5s ease-in-out; transition: width .5s ease-in-out, background-color .5s ease-in-out; } .block:hover .img-p { opacity: 1; -webkit-transition: opacity .5s .51s ease-in-out; -moz-transition: opacity .5s .51s ease-in-out; -ms-transition: opacity .5s .51s ease-in-out; -o-transition: opacity .5s .51s ease-in-out; transition: opacity .5s .51s ease-in-out; } .block:hover .layer { opacity: .5; -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -ms-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; } .img-p { position: absolute; font-size: 16px; opacity: 0; color: #FFF; text-align: left; line-height: 1.6em; } .p-container { width: 80%; position: relative; top: 30%; margin-left: 5%; } h1 { color: #fff; } .image { background-image: url(http://i67.tinypic.com/34ywe8m.jpg); -webkit-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center center; } .image.fixed { background-attachment: fixed; background-position: center center; -webkit-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; } .layer { position: absolute; left: 0; top: 0; bottom: 0; right: 0; background-color: #000; width: 100%; height: 100%; opacity: 0; } @media (max-width: 768px) { .container { width: 90%; margin: 0 auto; } .block { width: 100%; height: 200px; -webkit-transition: height .5s ease-in-out; -moz-transition: height .5s ease-in-out; -ms-transition: height .5s ease-in-out; -o-transition: height .5s ease-in-out; transition: height .5s ease-in-out; } .block:hover { width: 100%; height: 400px; -webkit-transition: height .5s ease-in-out; -moz-transition: height .5s ease-in-out; -ms-transition: height .5s ease-in-out; -o-transition: height .5s ease-in-out; transition: height .5s ease-in-out; } } @media (min-width: 768px) { .block { width: 15%; } } @media (min-width: 992px) { .block { width: 10%; } } .ua { position: fixed; right: 20px; top: 20px; color: #fff; font-size: 2em; } .fa { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .ua:hover .fa { color: #17BEBB; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
74
Pure CSS bread-loaf carousel
By:
pixeldev
<table> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Job Title</th> <th>Twitter</th> </tr> </thead> <tbody> <tr> <td data-column="First Name">James</td> <td data-column="Last Name">Matman</td> <td data-column="Job Title">Chief Sandwich Eater</td> <td data-column="Twitter">@james</td> </tr> <tr> <td data-column="First Name">Andor</td> <td data-column="Last Name">Nagy</td> <td data-column="Job Title">Designer</td> <td data-column="Twitter">@andornagy</td> </tr> <tr> <td data-column="First Name">Tamas</td> <td data-column="Last Name">Biro</td> <td data-column="Job Title">Game Tester</td> <td data-column="Twitter">@tamas</td> </tr> <tr> <td data-column="First Name">Zoli</td> <td data-column="Last Name">Mastah</td> <td data-column="Job Title">Developer</td> <td data-column="Twitter">@zoli</td> </tr> <tr> <td data-column="First Name">Szabi</td> <td data-column="Last Name">Nagy</td> <td data-column="Job Title">Chief Sandwich Eater</td> <td data-column="Twitter">@szabi</td> </tr> </tbody> </table>
table { width: 750px; border-collapse: collapse; margin:50px auto; } /* Zebra striping */ tr:nth-of-type(odd) { background: #eee; } th { background: #3498db; color: white; font-weight: bold; } td, th { padding: 10px; border: 1px solid #ccc; text-align: left; font-size: 18px; } /* Max width before this PARTICULAR table gets nasty This query will take effect for any screen smaller than 760px and also iPads specifically. */ @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { table { width: 100%; } /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; /* Label the data */ content: attr(data-column); color: #000; font-weight: bold; } }
73
Pure CSS Responsive Table.
By:
pixeldev
<div id="wrapper"> <div id="slideshow"> <p>NOTE: This solution is not WCAG or ADA Compliant</p> <p>Pure CSS auto-slide responsive carousel</p> <div class="logo"><a href="#"><img src="https://dummyimage.com/150x75/000/fff&text=Prototype" alt="offline" /></a></div> </div> </div>
* { margin: 0; padding: 0; } body { background: #333; } img {width: 100%; height:auto;} #wrapper { width: 960px; margin:0 auto ; position:relative; } #wrapper p { text-align: center; color: #fff; font-size: 2em; font-family: "Arial Black", sans-serif; text-shadow: 2px 2px #555; } #slideshow { border: 1px solid #fff; background: url(https://dummyimage.com/600x400/000/fff) no-repeat; /* this default image will show where browsers unable to process the [animation] function */ background-size: cover; height: 425px; /* animation */ -webkit-animation: slider 10s infinite ease-in-out; -webkit-animation-direction: alternate; animation: slider 10s infinite ease-in-out; animation-direction: alternate; } @-webkit-keyframes slider { 0% { background: url(https://dummyimage.com/600x400/000/fff&text=Random+1); } 25% { background: url(https://dummyimage.com/600x400/000/fff&text=Random+2); } 50% { background: url(https://dummyimage.com/600x400/000/fff&text=Random+3); } 100% { background: url(https://dummyimage.com/600x400/000/fff&text=Random+4); } } @keyframes slider { 0% { background: url(https://dummyimage.com/600x400/000/fff&text=Random+5); } 25% { background: url(https://dummyimage.com/600x400/000/fff&text=Random+6); } 50% { background: url(https://dummyimage.com/600x400/000/fff&text=Random+7); } 100% { background: url(https://dummyimage.com/600x400/000/fff&text=Random+8); } } .logo { position: absolute; right:0; bottom:0; } @media screen and (max-width: 768px) { #wrapper { width: 100%; margin:1em auto; } #wrapper p { font-size: 1.25em; letter-spacing:0.15em; text-shadow: 2px 1px #000; overflow:hidden; } #slideshow { width: 100%; height: auto; background-size: cover; } #slideshow img { max-width: 100%; margin: 0 auto; } }
73
Pure CSS auto-slide image carousel
By:
pixeldev
<div class="box-outer"> <div class="main_box"> <div class="bar top"></div> <div class="bar right delay"></div> <div class="bar bottom delay"></div> <div class="bar left"></div> </div> </div>
* { margin: 0; padding: 0; box-sizing: border-box; } body { background: #ffffff; align-items: center; min-height: 100vh; display: flex; } .box-outer { overflow: hidden; margin: 50px auto; width: 200px; height: 200px; } .main_box { width: 200px; height: 200px; position: relative; background: #f34c4c; border: 5px solid #ffffff; } .bar { position: absolute; width: 50px; height: 5px; background: rgb(0, 0, 0); transition: all 1s linear; animation-duration: 1s; animation-fill-mode: both; animation-iteration-count: infinite; } .bar.delay { animation-delay: 0.5s; } .top { top: -5px; left: -5px; } .right { top: 18px; right: -28px; transform: rotate(90deg); } .bottom { bottom: -5px; left: -5px; } .left { top: 18px; left: -28px; transform: rotate(90deg); } @-webkit-keyframes h-move { 0% { left: -5px; } 100% { left: 200px; } } @keyframes h-move { 0% { left: -5px; } 100% { left: 200px; } } .top, .bottom { animation-name: h-move; } @-webkit-keyframes v-move { 0% { top: -5px; } 100% { top:228px; } } @keyframes v-move { 0% { top: -5px; } 100% { top:228px; } } .right, .left { animation-name: v-move; }
73
Box border animation
By:
pixeldev
<div id="heart"> <div class="fill"></div> <div class="outline"></div> </div>
body { padding:15px; } #heart { display:block; height:70px; width:70px; position:relative; } #heart .fill { display: block; height: 70px; left: -1px; overflow: hidden; position: absolute; top: -4px; width: 70px; z-index: 3; -webkit-transition: height 2s ease-in-out; -moz-transition: height 2s ease-in-out; -o-transition: height 2s ease-in-out; -ms-transition: height 2s ease-in-out; transition: height 2s ease-in-out; } #heart .fill:before, #heart .fill:after { background: #e74c3c; border-radius: 85px 60px 0 0; content:""; height: 59px; left: 37px; position: absolute; top: 6px; width: 36px; -moz-border-radius: 50px 50px 0 0; border-radius: 85px 60px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } #heart .fill:after { left: 1px; -webkit-transform: rotate(45deg); border-radius: 45px 60px 0 0; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } #heart .outline { position: relative; margin-left: 8px; } #heart .outline:before, #heart .outline:after { position: absolute; content:""; left: 28px; top: 1px; width: 39px; height: 62px; background: #d53423; -moz-border-radius: 50px 50px 0 0; border-radius: 85px 60px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } #heart .outline:after { left: -11px; -webkit-transform: rotate(45deg); border-radius: 45px 60px 0 0; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } #heart:hover .fill { height:0px; }
73
Hover Fill my Heart Up
By:
pixeldev
<div class="cat-container"> <div class="cat-size cat-one"> <a class="b" href="https://lenadesign.org/html/" target="_blank"> <div class="center"> <h1 class="title-html">HTML</h1></a> <p class="textHTML">HTML is the standard markup language for documents designed to be displayed in a web browser.</p> <a class="a" href="https://lenadesign.org/html/" target="_blank"><p class="learnHTML">LEARN HTML></p></a> </div> </div> <div class="cat-size cat-two"> <div class="center"> <a class="b" href="https://lenadesign.org/css/" target="_black"> <h1 class="title-css">CSS</h1></a> <p class="textCSS">CSS is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.</p> <a class="a" href="https://lenadesign.org/css/" target="_black"> <p class="learnCSS">LEARN CSS></p></a> </div> </div> <div class="cat-size cat-three"> <div class="center"> <a class="b" href="https://lenadesign.org/javascript/" target="_blank"> <h1 class="title-js">JavaScript</h1></a> <p class="textJS">JavaScript is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS.</p> <a class="a" href="https://lenadesign.org/javascript/" target="_blank"> <p class="learnJS">LEARN JavaScript></p></a> </div> </div> <div class="cat-size cat-four"> <div class="center"> <a class="b" href="https://lenadesign.org/jquery/" target="_blank"> <h1 class="title-jQ">jQuery</h1></a> <p class="textJQ">jQuery is a JavaScript library created to simplify and make it easier to write JavaScript and HTML.</p> <a class="a" href="https://lenadesign.org/jquery/" target="_blank"> <p class="learnJQ">LEARN jQuery></p></a> </div> </div> <div class="cat-size cat-five"> <div class="center"> <a class="b" href="https://lenadesign.org/svg-4/" target="_blank"> <h1 class="title-svg">SVG</h1></a> <p class="textSVG">SVG is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.</p> <a class="a" href="https://lenadesign.org/svg-4/" target="_blank"> <p class="learnSVG">LEARN SVG></p></a> </div> </div> <div class="cat-size cat-six"> <div class="center"> <a class="b" href="https://lenadesign.org/css-javascript-animations-2/" target="_blank"> <h1 class="title-a">Animations</h1></a> <p class="textA">Learn how to create amazing animations using HTML, CSS and JavaScript!</p> <a class="a" href="https://lenadesign.org/css-javascript-animations-2/" target="_blank"> <p class="learnA">Animations></p></a> </div> </div> </div>
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap'); body { margin:0; padding:0; } .cat-container { position: relative; height: 100vh; width: 100%; display: -webkit-flex; display: flex; font-family: 'Fira Sans', sans-serif; overflow: hidden; color: white; } @media screen and (max-width: 768px) { .cat-container {flex-direction: column;} } @media screen and (max-width: 480px) { .cat-container {flex-direction: column;} } .cat-size { display: flex; display: -webkit-flex; align-items: center; justify-content:center; flex-grow: 1; flex-basis: 0; overflow: hidden; } .cat-one, .cat-two, .cat-three, .cat-four, .cat-five, .cat-six { transition: flex-grow .3s; -webkit-transition: flex-grow .3s; -moz-transition: flex-grow .3s; -ms-transition: flex-grow .3s; -o-transition: flex-grow .3s; width:100%; height: 100vh; } .cat-one { background-color: #56ab91; } .cat-two { background-color: #469d89; } .cat-three { background-color: #4358f80; } .cat-three { background-color: #358f80; } .cat-four { background-color: #248277; } .cat-five { background-color: #14746f; } .cat-six { background-color: #036666; } .cat-one:hover { flex-grow: 3; } .cat-two:hover { flex-grow: 3; } .cat-three:hover { flex-grow: 3; } .cat-four:hover { flex-grow: 3; } .cat-five:hover { flex-grow: 3; } .cat-six:hover { flex-grow: 3; } .center { display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 2; text-align: center; width:100%; height: 100vh; } .title-html, .title-css, .title-js, .title-jQ, .title-svg, .title-a { writing-mode: vertical-rl; margin: 30px; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; } .cat-one:hover .title-html { writing-mode: horizontal-tb; } .cat-two:hover .title-css { writing-mode: horizontal-tb; } .cat-three:hover .title-js { writing-mode: horizontal-tb; } .cat-four:hover .title-jQ { writing-mode: horizontal-tb; } .cat-five:hover .title-svg { writing-mode: horizontal-tb; } .cat-six:hover .title-a { writing-mode: horizontal-tb; } @media screen and (max-width: 768px) { .title-html, .title-css, .title-js, .title-jQ, .title-svg, .title-a {writing-mode: horizontal-tb !important; } .textHTML, .learnHTML, .textCSS, .learnCSS, .textJS, .learnJS, .learnJQ, .textJQ, .learnA, .textA, .learnSVG, .textSVG { display: none !important; } } .textHTML, .textCSS, .textJS, .textJQ, .textSVG, .textA, .learnHTML, .learnCSS, .learnJS, .learnJQ, .learnSVG, .learnA { display: none; } .cat-one:hover .textHTML { display: block; animation: up .5s ease forwards; } .textHTML, .textCSS, .textJS, .textJQ, .textSVG, .textA { width:50%; border: 3px solid white; border-radius:20px; padding:20px; } .cat-one:hover .learnHTML { display: block; animation: up .5s ease forwards; } .cat-two:hover .learnCSS { display: block; animation: up .5s ease forwards; } .cat-three:hover .learnJS { display: block; animation: up .5s ease forwards; } .cat-three:hover .textJS { display: block; animation: up .5s ease forwards; } .cat-two:hover .textCSS { display: block; animation: up .5s ease forwards; } .cat-four:hover .textJQ { display: block; animation: up .5s ease forwards; } .cat-four:hover .learnJQ { display: block; animation: up .5s ease forwards; } .cat-five:hover .learnSVG { display: block; animation: up .5s ease forwards; } .cat-six:hover .learnA { display: block; animation: up .5s ease forwards; } .cat-six:hover .textA { display: block; animation: up .5s ease forwards; } .cat-five:hover .textSVG { display: block; animation: up .5s ease forwards; } @keyframes up { 0% {opacity:0; transform: translateY(50px);} 50% {opacity:0; transform: translateY(50px);} 100% {{opacity:1; transform: translateY(0px);}} } .a { text-decoration: underline; color: white; } .b { text-decoration: none; color: white; }
73
Pure CSS Responsive Navigation Menu (sliding effect)
By:
pixeldev
<!-- 3D Slideshow Section --> <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); } }
72
3D Slider | Pure CSS
By:
pixeldev
Previous
1
…
8
9
10
11
12
…
24
Next
