Start Coding
All
Accordion
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
All
Video
09 February 2019
Button - Fluent Design-Like
button
Shot
29 March 2019
Task List
task-list
app
Video
16 April 2019
Radio Buttons
Radio
Video
27 April 2019
User Interface - Flip Card
card
Video
14 July 2019
Link & Button - Shatter Effect
link
button
Video
18 August 2019
Switches
switch
Video
24 August 2019
Modal
modal
Video
26 August 2019
Modals (Modal v2)
modal
Video
29 August 2019
Off-Screen Menu
nav
menu
Video
06 November 2019
Parallax Tilt Effect Cards
card
tilt-effects
Video
11 November 2019
Plant App: Sign Up UI
app
animation
Video
23 December 2019
Block Revealing Effect
text
revealing-effect
dlar_dev-cards
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&display=swap'); /* DEFAULTS */ /* ================================================================================= */ *, *::before, *::after { box-sizing: border-box; } body { display: grid; place-content: center; min-height: 100vh; font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 0; } /* CARDS */ /* ================================================================================= */ .cards { display: flex; align-items: center; padding: 40px; overflow-x: scroll; min-height: 100vh; } .card { min-width: 300px; max-width: 300px; height: 400px; margin-left: -80px; border-radius: 40px; padding: 30px; box-shadow: -4px 4px 26px 2px hsla(184, 50%, 20%, .1); background: linear-gradient(to right bottom, hsl(0, 0%, 98%), hsl(0, 0%, 96%)); transition: all .3s; position: relative; } .card:first-child { margin-left: 0; } .card:hover, .card:focus-within { transform: translateY(-20px) } .card:hover+.card, .card:focus-within+.card { transform: translateX(80px); } .card-info { margin-bottom: 14px; } .card-info>span:first-child { margin-right: 6px; } .card-grad--video { color: transparent; background: linear-gradient(to right, hsl(91, 96%, 50%), hsl(159, 96%, 50%)); background-clip: text; } .card-grad--shot { color: transparent; background: linear-gradient(to right, hsl(294, 96%, 50%), hsl(201, 96%, 50%)); background-clip: text; } .card-info>span:last-child { color: hsl(0, 0%, 70%); } .card-heading { font-size: 1.6em; } .card-heading a:link { color: hsl(30, 50%, 40%); font-weight: bold; text-decoration: none; } .card-tags { display: flex; position: absolute; bottom: 50px; left: 30px; } .card-tag { color: hsl(0, 0%, 60%); padding: 5px 12px; border: 2px solid hsl(30, 40%, 70%); border-radius: 100px; text-transform: uppercase; margin-right: 10px; font-size: .9em; } /* ABS */ /* ================================================================================= */ .abs-site-link { position: fixed; bottom: 20px; left: 20px; color: hsla(0, 0%, 0%, .6); font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', sans-serif; }
72
Cards Animation
By:
rald_dev
body { background: #222; } .box { background-color: #61ab20; margin: 0 auto; width: 500px; height: 300px; position: relative; box-shadow: inset 0 0 3px #000; border-radius: 5px; border: 1px solid #111; overflow: hidden; } .box b { display: block; width: 20px; height: 20px; border-radius: 50%; background-color: #3673cf; box-shadow: inset -5px -5px 5px rgba(0,0,0,.6), 15px 15px 2px rgba(0,0,0,.04); position: absolute; -webkit-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate; -moz-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate; -o-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate; animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate; } @-webkit-keyframes moveX { from { left: 0; } to { left: 480px; } } @-moz-keyframes moveX { from { left: 0; } to { left: 480px; } } @-o-keyframes moveX { from { left: 0; } to { left: 480px; } } @keyframes moveX { from { left: 0; } to { left: 480px; } } @-webkit-keyframes moveY { from { top: 0; } to { top: 280px; } } @-moz-keyframes moveY { from { top: 0; } to { top: 280px; } } @-o-keyframes moveY { from { top: 0; } to { top: 280px; } } @keyframes moveY { from { top: 0; } to { top: 280px; } }
72
CSS Bouncing Ball
By:
rald_dev
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
html, body { margin: 0px; } header, footer { font-family: Raleway; margin: 0 auto; padding: 5em 3em; text-align: center; background: #555; } header h1 { color: #AAA; font-size: 40px; font-weight: lighter; margin-bottom: 5px; } header span { color: #222; } footer span { color: #AAA; } div.container { font-family: Raleway; margin: 0 auto; padding: 10em 3em; text-align: center; } div.container a { color: #FFF; text-decoration: none; font: 20px Raleway; margin: 0px 10px; padding: 10px 10px; position: relative; z-index: 0; cursor: pointer; } .red { background: #f44336; } .purple { background: #673ab7; } .indigo { background: #3f51b5; } .blue { background: #2196f3; } .cyan { background: #00bcd4; } .teal { background: #009688; } .green { background: #4caf50; } .lightGreen { background: #8bc34a; } .lime { background: #c0ca33; } .yellow { background: #fdd835; } .amber { background: #ffc107; } .orange { background: #ff9800 } .deepOrange { background: #ff5722; } .brown { background: #795548; } .gray { background: #9e9e9e; } /* Top and Bottom borders go out */ div.topBotomBordersOut a:before, div.topBotomBordersOut a:after { position: absolute; left: 0px; width: 100%; height: 2px; background: #FFF; content: ""; opacity: 0; transition: all 0.3s; } div.topBotomBordersOut a:before { top: 0px; transform: translateY(10px); } div.topBotomBordersOut a:after { bottom: 0px; transform: translateY(-10px); } div.topBotomBordersOut a:hover:before, div.topBotomBordersOut a:hover:after { opacity: 1; transform: translateY(0px); } /* Top and Bottom borders come in */ div.topBotomBordersIn a:before, div.topBotomBordersIn a:after { position: absolute; left: 0px; width: 100%; height: 2px; background: #FFF; content: ""; opacity: 0; transition: all 0.3s; } div.topBotomBordersIn a:before { top: 0px; transform: translateY(-10px); } div.topBotomBordersIn a:after { bottom: 0px; transform: translateY(10px); } div.topBotomBordersIn a:hover:before, div.topBotomBordersIn a:hover:after { opacity: 1; transform: translateY(0px); } /* Top border go down and Left border appears */ div.topLeftBorders a:before { position: absolute; top: 0px; left: 0px; width: 2px; height: 0px; background: #FFF; content: ""; opacity: 1; transition: all 0.3s; } div.topLeftBorders a:after { position: absolute; top: 0px; left: 0px; width: 100%; height: 2px; background: #FFF; content: ""; opacity: 1; transition: all 0.3s; } div.topLeftBorders a:hover:before { height: 100%; } div.topLeftBorders a:hover:after { opacity: 0; top: 100%; } /* Circle behind */ div.circleBehind a:before, div.circleBehind a:after { position: absolute; top: 22px; left: 50%; width: 50px; height: 50px; border: 4px solid #0277bd; transform: translateX(-50%) translateY(-50%) scale(0.8); border-radius: 50%; background: transparent; content: ""; opacity: 0; transition: all 0.3s; z-index: -1; } div.circleBehind a:after { border-width: 2px; transition: all 0.4s; } div.circleBehind a:hover:before { opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1); } div.circleBehind a:hover:after { opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1.3); } /* Brackets go out */ div.brackets a:before, div.brackets a:after { position: absolute; opacity: 0; font-size: 35px; top: 0px; transition: all 0.3s; } div.brackets a:before { content: '('; left: 0px; transform: translateX(10px); } div.brackets a:after { content: ')'; right: 0px; transform: translateX(-10px); } div.brackets a:hover:before, div.brackets a:hover:after { opacity: 1; transform: translateX(0px); } /* Border from Y to X */ div.borderYtoX a:before, div.borderYtoX a:after { position: absolute; opacity: 0.5; height: 100%; width: 2px; content: ''; background: #FFF; transition: all 0.3s; } div.borderYtoX a:before { left: 0px; top: 0px; } div.borderYtoX a:after { right: 0px; bottom: 0px; } div.borderYtoX a:hover:before, div.borderYtoX a:hover:after { opacity: 1; height: 2px; width: 100%; } /* Border X get width */ div.borderXwidth a:before, div.borderXwidth a:after { position: absolute; opacity: 0; width: 0%; height: 2px; content: ''; background: #FFF; transition: all 0.3s; } div.borderXwidth a:before { left: 0px; top: 0px; } div.borderXwidth a:after { right: 0px; bottom: 0px; } div.borderXwidth a:hover:before, div.borderXwidth a:hover:after { opacity: 1; width: 100%; } /* Pull down */ div.pullDown a:before { position: absolute; width: 100%; height: 2px; left: 0px; top: 0px; content: ''; background: #FFF; opacity: 0.3; transition: all 0.3s; } div.pullDown a:hover:before { height: 100%; } /* Pull up */ div.pullUp a:before { position: absolute; width: 100%; height: 2px; left: 0px; bottom: 0px; content: ''; background: #FFF; opacity: 0.3; transition: all 0.3s; } div.pullUp a:hover:before { height: 100%; } /* Pull right */ div.pullRight a:before { position: absolute; width: 2px; height: 100%; left: 0px; top: 0px; content: ''; background: #FFF; opacity: 0.3; transition: all 0.3s; } div.pullRight a:hover:before { width: 100%; } /* Pull left */ div.pullLeft a:before { position: absolute; width: 2px; height: 100%; right: 0px; top: 0px; content: ''; background: #FFF; opacity: 0.3; transition: all 0.3s; } div.pullLeft a:hover:before { width: 100%; } /* Pull up and down */ div.pullUpDown a:before, div.pullUpDown a:after { position: absolute; width: 100%; height: 2px; left: 0px; content: ''; background: #FFF; opacity: 0.3; transition: all 0.3s; } div.pullUpDown a:before { top: 0px; } div.pullUpDown a:after { bottom: 0px; } div.pullUpDown a:hover:before, div.pullUpDown a:hover:after { height: 100%; } /* Pull right and left */ div.pullRightLeft a:before, div.pullRightLeft a:after { position: absolute; width: 2px; height: 100%; top: 0px; content: ''; background: #FFF; opacity: 0.3; transition: all 0.3s; } div.pullRightLeft a:before { left: 0px; } div.pullRightLeft a:after { right: 0px; } div.pullRightLeft a:hover:before, div.pullRightLeft a:hover:after { width: 100%; } /* Highlight text out */ div.highlightTextOut a { color: rgba(255, 255, 255, 0.3); } div.highlightTextOut a:before, div.highlightTextIn a:before { position: absolute; color: #FFF; top: 0px; left: 0px; padding: 10px; overflow: hidden; content: attr(alt); transition: all 0.3s; transform: scale(0.8); opacity: 0; } div.highlightTextOut a:hover:before, div.highlightTextIn a:hover:before { transform: scale(1); opacity: 1; } /* Highlight text in */ div.highlightTextIn a { color: rgba(0, 0, 0, 0.4); } div.highlightTextIn a:before { transform: scale(1.2); }
71
Navigation Animation
By:
rald_dev
.loader { border: 8px; border-top: 4px dotted #FF0035; border-radius:50%; width: 120px; height: 120px; animation: spin 3s linear infinite; margin: auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } 0% {background-color:#FF0035 ; opacity: 0.2;} 30% {background-color:white; opacity: 1.0;} 70% {background-color:white; opacity: 1.0;} 100% {background-color: #FF0035; opacity: 0.2;} } }
71
Red loading animation
By:
rald_dev
Home
Chat
Products
Exit
body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; background: #111111; color: #fff; } .card { background: #483d8b; width: 300px; height: 160px; display: flex; align-items: center; justify-content: center; border-radius: 20px; } .menu li { display: flex; align-items: center; justify-content: center; border-radius: 10px; margin-right: 40px; list-style: none; width: 180px; height: 30px; cursor: pointer; } .item a { color: white; } ion-icon { position: relative; left: -50px; color: #fff; font-size: 18px; } a { position: absolute; margin-left: 12px; text-decoration: none; color: #000; } li.item:hover { background: #7b68ee; border: 1px solid #fff; color: white; margin-left: 28px; transition: 0.4s; } p { font-size: 12px; }
71
Button hover with card
By:
rald_dev
body{ background: #1d1e22; } .container{ width: 20px; position: relative; margin: auto; top: 20vh; } .ball{ --radius: calc(200px + var(--n)*10px); top: var(--radius); transform-origin: 0 calc(-1 * var(--radius)); position: absolute; width: 20px; height: 20px; border-radius: 10px; border: 1px solid #000; background: #ffad4a; animation: oscillation calc(60s / (50 + var(--n))) ease-in-out infinite alternate; } .ball::before{ content: ""; position: absolute; top: calc(-1*var(--radius)); left: 50%; transform: translate(-50%); width: 1px; height: var(--radius); background: black; } .ball1{--n:1}.ball2{--n:2}.ball3{--n:3}.ball4{--n:4}.ball5{--n:5}.ball6{--n:6}.ball7{--n:7}.ball8{--n:8}.ball9{--n:9}.ball10{--n:10}.ball11{--n:11}.ball12{--n:12}.ball13{--n:13}.ball14{--n:14}.ball15{--n:15} @keyframes oscillation { from { transform: rotate(20deg); } to{ transform: rotate(-20deg); } }
71
Pendulum Wave
By:
rald_dev
:root { --sqrt3: 1.73205080757; /* Square root of 3 */ --time: 11; /* Duration of animation */ --gap: 1; /* Horizontal gap between hexagons */ --radius: 3; /* Radius of inscribed circle */ --Gap: var(--gap) / 2 * var(--sqrt3); /* Vertical gap between hexagons */ --Radius: 2 / var(--sqrt3) * var(--radius); /* Radius of circumcircle */ } @keyframes odd-animation { 0% { transform: translate(calc( 0.5 * var(--offset-x) ), calc( 0.5 * var(--offset-y) )) scale(0) } 33% { transform: translate(calc( 1 * var(--offset-x) ), calc( 1 * var(--offset-y) )) scale(1) } 66% { transform: translate(calc( 2 * var(--offset-x) ), calc( 2 * var(--offset-y) )) scale(1) } 100% { transform: translate(calc( 3 * var(--offset-x) ), calc( 3 * var(--offset-y) )) scale(0) } } @keyframes even-animation { 50% { transform: translate(calc( 1 * var(--offset-x) ), calc( 1 * var(--offset-y) )) scale(1) } 100% { transform: translate(calc( 2 * var(--offset-x) ), calc( 2 * var(--offset-y) )) scale(0) } } body { align-items: center; background-color: black; display: flex; height: 100vh; justify-content: center; overflow: hidden; margin: 0; } .hex { color: white; display: flex; font-size: 3vmin; height: calc(2em * var(--Radius)); width: calc(2em * var(--radius)); } .hex::before { border: calc(0.5em * var(--Radius)) solid transparent; border-left: 0; border-right: calc(1em * var(--radius)) solid currentColor; content: ""; height: var(--Radius); } .hex::after { border: calc(0.5em * var(--Radius)) solid transparent; border-left: calc(1em * var(--radius)) solid currentColor; border-right: 0; content: ""; height: var(--Radius); } .center { position: relative; } .odd, .even { --global-offset-x: calc( 0.5em * var(--gap) + var(--radius) * 1em); --global-offset-y: calc( 1.5em * var(--Radius) + var(--Gap) * 1em); animation: infinite cubic-bezier(.21, .61, .01, .89); position: absolute; transform: translate(0, 0) scale(0); } .odd { animation-duration: 11s; } .even { animation-duration: 7.333333333s; } .hex.first { animation-delay: -6.2857142857s; } .hex.second { animation-delay: -2.619047619s; } .hex.third { animation-delay: 1.0476190476s; } @supports (animation-delay: calc(1 * 1s)) and (animation-duration: calc(1 * 1s)) { .odd { animation-duration: calc(var(--time) * 1s); } .even { animation-duration: calc( var(--time) * 2 / 3 * 1s); } .hex.first { animation-delay: calc( var(--time) / -1.75 * 1s ); } .hex.second { animation-delay: calc( var(--time) * 1.25 / -5.25 * 1s ); } .hex.third { animation-delay: calc( var(--time) * -0.25 / -2.625 * 1s ); } } .hex.one { --offset-x: calc( var(--global-offset-x) * 1 ); --offset-y: calc( var(--global-offset-y) * -1 ); animation-name: odd-animation; bottom: 0; left: 0; } .hex.two { --offset-x: calc( var(--global-offset-x) * 1.5 ); --offset-y: calc( var(--global-offset-y) * -0.5 ); animation-name: even-animation; bottom: calc( var(--global-offset-y) * 0.5 ); left: calc( var(--global-offset-x) * 1.5 ); } .hex.three { --offset-x: calc( var(--global-offset-x) * 2 ); --offset-y: calc( var(--global-offset-y) * 0 ); animation-name: odd-animation; bottom: 0; right: 0; } .hex.four { --offset-x: calc( var(--global-offset-x) * 1.5 ); --offset-y: calc( var(--global-offset-y) * 0.5 ); animation-name: even-animation; top: calc( var(--global-offset-y) * 0.5 ); left: calc( var(--global-offset-x) * 1.5 ); } .hex.five { --offset-x: calc( var(--global-offset-x) * 1 ); --offset-y: calc( var(--global-offset-y) * 1 ); animation-name: odd-animation; top: 0; left: 0; } .hex.six { --offset-x: calc( var(--global-offset-x) * 0 ); --offset-y: calc( var(--global-offset-y) * 1 ); animation-name: even-animation; top: calc( var(--global-offset-y) * 1 ); left: 0; } .hex.seven { --offset-x: calc( var(--global-offset-x) * -1 ); --offset-y: calc( var(--global-offset-y) * 1 ); animation-name: odd-animation; top: 0; right: 0; } .hex.eight { --offset-x: calc( var(--global-offset-x) * -1.5 ); --offset-y: calc( var(--global-offset-y) * 0.5 ); animation-name: even-animation; top: calc( var(--global-offset-y) * 0.5 ); right: calc( var(--global-offset-x) * 1.5 ); } .hex.nine { --offset-x: calc( var(--global-offset-x) * -2 ); --offset-y: calc( var(--global-offset-y) * 0 ); animation-name: odd-animation; top: 0; right: 0; } .hex.ten { --offset-x: calc( var(--global-offset-x) * -1.5 ); --offset-y: calc( var(--global-offset-y) * -0.5 ); animation-name: even-animation; bottom: calc( var(--global-offset-y) * 0.5 ); right: calc( var(--global-offset-x) * 1.5 ); } .hex.eleven { --offset-x: calc( var(--global-offset-x) * -1 ); --offset-y: calc( var(--global-offset-y) * -1 ); animation-name: odd-animation; bottom: 0; right: 0; } .hex.twelve { --offset-x: calc( var(--global-offset-x) * 0 ); --offset-y: calc( var(--global-offset-y) * -1 ); animation-name: even-animation; bottom: calc( var(--global-offset-y) * 1 ); left: 0; }
71
Hexagon Animation
By:
rald_dev
:hover, please
Now here
Around and inside I
Around and inside II
:hover with animation
*, *:after, *:before { box-sizing: border-box; -moz-box-sizing: border-box; } * {margin:0;padding:0;border:0 none;position: relative; outline: none; } html, body { background: #004050; font-family: Quando; font-weight: 300; width: 100%; } h2, h3 { background: #0D757D; width: 100%; min-height: 200px; line-height: 200px; font-size: 3rem; font-weight: normal; text-align: center; color: rgba(0,0,0,.4); margin: 3rem auto 0; } .uno {background: #ff5e33;} .dos.bis {background: #85144B;} .dos {background: #FADD40;} h3 {background: #2B5B89;} h2 > a, h3 > a { text-decoration: none; color: rgba(0,0,0,.4); z-index: 1; } h2 > a:before { content: ""; position: absolute; width: 100%; height: 3px; bottom: 0; left: 0; background: #9CF5A6; visibility: hidden; border-radius: 5px; transform: scaleX(0); transition: .25s linear; } h2 > a:hover:before, h2 > a:focus:before { visibility: visible; transform: scaleX(1); } .uno a:before { background: rgba(0,0,0,0); box-shadow: 0 0 10px 2px #ffdb00; } .dos > a:after { content: ""; position: absolute; width: 100%; height: 7px; border: 1px solid #000; bottom: -2px; left: 0; background: #fff; border-radius: 5px; opacity: 0; transform: scalex(0); transition: .5s; } .dos.bis > a:after { opacity: .05; transform: scalex(1); } .dos:hover > a:after { opacity: .15; transform: scalex(1); } .dos.bis > a:before { background: rgba(0,0,0,0); box-shadow: 0 0 10px 2px #FADD40; } .dos > a:before { background: rgba(0,0,0,0); box-shadow: 0 0 10px 2px #FF5E33; } h3 > a:before { content: ""; background: #7FDBFF; position: absolute; width: 100%; height: 5px; bottom: 0; left: 0; border-radius: 5px; transform: scaleX(0); animation: 1.4s forwards no-hover-v linear; animation-fill-mode: forwards; z-index: -1; } h3 > a:hover:before, h3 > a:focus:before { animation: .5s forwards hover-v linear; animation-fill-mode: forwards; } @keyframes hover-v { 0% { transform: scaleX(0); height: 5px; } 45% { transform: scaleX(1.05); height: 5px; } 55% {height: 5px;} 100% { transform: scaleX(1.05); height: 3.8rem; } } @keyframes no-hover-v { 0% { transform: scaleX(1.05); height: 3.8rem; } 45% {height: 5px;} 55% { transform: scaleX(1.05); height: 5px; opacity: 1; } 100% { transform: scaleX(0); height: 5px; opacity: .02; } } p {padding: .5rem;} p a {color: rgba(255,255,255,.5)}
70
text-decoration: underline animated
By:
rald_dev
I'm a bouncing text
@keyframes bounce { 0%, 30%, 50%, 100% { transform: translateY(0); } 60%, 80% { transform: translateY(-50%) } 20%, 40% { transform: translateY(-100%); } } .container-div { width: 200px; text-align: center; background-color: green; padding: 5px; margin: 0 auto; } .p-bounce { color: white; animation-name: bounce; animation-duration: 1s; animation-iteration-count: infinite; }
70
Bouncing text
By:
rald_dev
header
nav
section
/* Note: This example only works with Windows Insider Preview Builds 16237+ or the Fall Creators Update. */ body { font-family: segoe-ui_normal,Segoe UI,Segoe,Segoe WP,Helvetica Neue,Helvetica,sans-serif; display: grid; grid-template-areas: "header header header" "nav section aside" "footer footer footer"; grid-template-rows: 80px 1fr 50px; grid-template-columns: 15% 1fr 18%; grid-gap: 5px; height: 100vh; margin: 10px; } header { background: #707070; grid-area: header; } nav { background: #C9BFBF; grid-area: nav; } section { background: #ABABAB; grid-area: section; } aside { background: #C9C9C9; grid-area: aside; } footer { background: #707070; grid-area: footer; } header, nav, section, aside, footer { padding: 5px; }
70
CSS Grid Layout
By:
rald_dev
MacBook Air
@neoberg
contact me
body { background: #fff; } .macbook { width: 150px; height: 96px; position: absolute; left: 50%; top: 50%; margin: -75px 0 0 -48px; perspective: 500px; } .shadow { position: absolute; width: 60px; height: 0px; left: 40px; top: 160px; transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg); box-shadow: 0 0 60px 40px rgba(0,0,0,0.3); animation: shadow infinite 7s ease; } .inner { z-index: 20; position: absolute; width: 150px; height: 96px; left: 0; top: 0; transform-style: preserve-3d; transform:rotateX(-20deg) rotateY(0deg) rotateZ(0deg); animation: rotate infinite 7s ease; } .screen { width: 150px; height: 96px; position: absolute; left: 0; bottom: 0; border-radius: 7px; background: #ddd; transform-style: preserve-3d; transform-origin: 50% 93px; transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); animation: lid-screen infinite 7s ease; background-image: linear-gradient(45deg, rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 100%); background-position: left bottom; background-size: 300px 300px; box-shadow: inset 0 3px 7px rgba(255,255,255,0.5); } .screen .logo { position: absolute; width: 20px; height: 24px; left: 50%; top: 50%; margin: -12px 0 0 -10px; transform: rotateY(180deg) translateZ(0.1px); } .screen .face-one { width: 150px; height: 96px; position: absolute; left: 0; bottom: 0; border-radius: 7px; background: #d3d3d3; transform: translateZ(2px); background-image: linear-gradient(45deg,rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%); } .screen .face-one .camera { width: 3px; height: 3px; border-radius: 100%; background: #000; position: absolute; left: 50%; top: 4px; margin-left: -1.5px; } .screen .face-one .display { width: 130px; height: 74px; margin: 10px; background: url("https://upload.wikimedia.org/wikipedia/en/9/98/MacOS_Monterey_Desktop.png") no-repeat center center #000; background-size: 100% 100%; border-radius: 1px; position: relative; box-shadow: inset 0 0 2px rgba(0,0,0,1); } .screen .face-one .display .shade { position: absolute; left: 0; top: 0; width: 130px; height: 74px; background: linear-gradient(-135deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 47%,rgba(255,255,255,0) 48%); animation: screen-shade infinite 7s ease; background-size: 300px 200px; background-position: 0px 0px; } .screen .face-one span { position: absolute; top: 85px; left: 57px; font-size: 6px; color: #666 } .body { width: 150px; height: 96px; position: absolute; left: 0; bottom: 0; border-radius: 7px; background: #cbcbcb; transform-style: preserve-3d; transform-origin: 50% bottom; transform: rotateX(-90deg); animation: lid-body infinite 7s ease; background-image: linear-gradient(45deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%); } .body .face-one { width: 150px; height: 96px; position: absolute; left: 0; bottom: 0; border-radius: 7px; transform-style: preserve-3d; background: #dfdfdf; animation: lid-keyboard-area infinite 7s ease; transform: translateZ(-2px); background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%); } .body .touchpad { width: 40px; height: 31px; position: absolute; left: 50%; top: 50%; border-radius: 4px; margin: -44px 0 0 -18px; background: #cdcdcd; background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%); box-shadow: inset 0 0 3px #888; } .body .keyboard { width: 130px; height: 45px; position: absolute; left: 7px; top: 41px; border-radius: 4px; transform-style: preserve-3d; background: #cdcdcd; background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%); box-shadow: inset 0 0 3px #777; padding: 0 0 0 2px; } .keyboard .key { width: 6px; height: 6px; background: #444; float: left; margin: 1px; transform: translateZ(-2px); border-radius: 2px; box-shadow: 0 -2px 0 #222; animation: keys infinite 7s ease; } .key.space { width: 45px; } .key.f { height: 3px; } .body .pad { width: 5px; height: 5px; background: #333; border-radius: 100%; position: absolute; } .pad.one { left: 20px; top: 20px; } .pad.two { right: 20px; top: 20px; } .pad.three { right: 20px; bottom: 20px; } .pad.four { left: 20px; bottom: 20px; } @keyframes rotate { 0% { transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg); } 5% { transform: rotateX(-20deg) rotateY(-20deg) rotateZ(0deg); } 20% { transform: rotateX(30deg) rotateY(200deg) rotateZ(0deg); } 25% { transform: rotateX(-60deg) rotateY(150deg) rotateZ(0deg); } 60% { transform: rotateX(-20deg) rotateY(130deg) rotateZ(0deg); } 65% { transform: rotateX(-20deg) rotateY(120deg) rotateZ(0deg); } 80% { transform: rotateX(-20deg) rotateY(375deg) rotateZ(0deg); } 85% { transform: rotateX(-20deg) rotateY(357deg) rotateZ(0deg); } 87% { transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg); } 100% { transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg); } } @keyframes lid-screen { 0% { transform: rotateX(0deg); background-position: left bottom; } 5% { transform: rotateX(50deg); background-position: left bottom; } 20% { transform: rotateX(-90deg); background-position: -150px top; } 25% { transform: rotateX(15deg); background-position: left bottom; } 30% { transform: rotateX(-5deg); background-position: right top; } 38% { transform: rotateX(5deg); background-position: right top; } 48% { transform: rotateX(0deg); background-position: right top; } 90% { transform: rotateX(0deg); background-position: right top; } 100% { transform: rotateX(0deg); background-position: right center; } } @keyframes lid-body { 0% { transform: rotateX(-90deg); } 50% { transform: rotateX(-90deg); } 100% { transform: rotateX(-90deg); } } @keyframes lid-keyboard-area { 0% { background-color: #dfdfdf; } 50% { background-color: #bbb; } 100% { background-color: #dfdfdf; } } @keyframes screen-shade { 0% { background-position: -20px 0px; } 5% { background-position: -40px 0px; } 20% { background-position: 200px 0; } 50% { background-position: -200px 0; } 80% { background-position: 0px 0px; } 85% { background-position: -30px 0; } 90% { background-position: -20px 0; } 100% { background-position: -20px 0px; } } @keyframes keys { 0% { box-shadow: 0 -2px 0 #222; } 5% { box-shadow: 1 -1px 0 #222; } 20% { box-shadow: -1px 1px 0 #222; } 25% { box-shadow: -1px 1px 0 #222; } 60% { box-shadow: -1px 1px 0 #222; } 80% { box-shadow: 0 -2px 0 #222; } 85% { box-shadow: 0 -2px 0 #222; } 87% { box-shadow: 0 -2px 0 #222; } 100% { box-shadow: 0 -2px 0 #222; } } @keyframes shadow { 0% { transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg); box-shadow: 0 0 60px 40px rgba(0,0,0,0.3); } 5% { transform: rotateX(80deg) rotateY(10deg) rotateZ(0deg); box-shadow: 0 0 60px 40px rgba(0,0,0,0.3); } 20% { transform: rotateX(30deg) rotateY(-20deg) rotateZ(-20deg); box-shadow: 0 0 50px 30px rgba(0,0,0,0.3); } 25% { transform: rotateX(80deg) rotateY(-20deg) rotateZ(50deg); box-shadow: 0 0 35px 15px rgba(0,0,0,0.1); } 60% { transform: rotateX(80deg) rotateY(0deg) rotateZ(-50deg) translateX(30px); box-shadow: 0 0 60px 40px rgba(0,0,0,0.3); } 100% { box-shadow: 0 0 60px 40px rgba(0,0,0,0.3); } } .links { position: absolute; right: 20px; bottom: 20px; } .links a { color : #555; margin-left: 10px; text-decoration: none; }
70
Macbook Air
By:
rald_dev
body { background-color: black; } .gallery { border: 3px solid darkblue; max-width: 1014px; margin: auto; background-color: #ccc; } .gallery { padding: 2px; padding: 0.4vw; font-size: 0; flex-flow: row wrap; display: flex; } .gallery div { flex: auto; width: 200px; margin: 0.5vw; } .gallery div img { width: 100%; height: auto; } /*Grayscale*/ img { filter: grayscale(100%); filter: saturate(0); transition: all .3s ease; /* box-shadow: 2px 2px 5px; */ } img:hover { filter: grayscale(0); filter: saturate(1.5); box-shadow: 0px 0px 5px; }
70
Pure CSS using Flexbox CSS Gallery
By:
rald_dev
Previous
1
…
3
4
5
6
7
…
10
Next