Beautiful gradients, Expanding collums
How do I make an beautiful gradients, expanding collums?
Four mouth-watering gradients with a click-to expand to full screen effect that doesn't affect the other collumns.. What is a beautiful gradients, expanding collums? How do you make a beautiful gradients, expanding collums? This script and codes were developed by Hans Engebretsen on 09 August 2022, Tuesday.
Beautiful gradients, Expanding collums Previews
Beautiful gradients, Expanding collums - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Beautiful gradients, Expanding collums</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box;
}
body, html { position: relative; width: 100%; height: 100%;
}
ul { margin: 0; padding: 0; width: 100%; height: 100%; position: relative;
}
li { display: inline-block; height: 100%; width: 25%; border-right: 1px solid white; cursor: pointer; position: absolute; top: 0; transition: .3s width .2s, left .2s, 100ms z-index .6s;
}
li:nth-child(2) { left: 25%;
}
li:nth-child(3) { left: 50%;
}
li:nth-child(4) { left: 75%;
}
li.active { width: 100%; z-index: 1; transition: .3s width .2s, left .2s; border-right: none; left: 0;
}
li:before { content: "Click to Expand"; display: block; width: 100%; height: 100%; font-weight: bold; background-color: rgba(255, 255, 255, 0.2); text-align: center; padding-top: 40%; color: white; position: absolute; top: 1; left: 1; transition: 200ms opacity; opacity: 0;
}
li:hover:before { opacity: 1;
}
li:hover.active:hover:before { display: none;
}
div { background: -webkit-radial-gradient(closest-corner, rgba(16, 47, 70, 0) 60%, rgba(16, 47, 70, 0.2)), -webkit-linear-gradient(108deg, #e5e9bf 10%, #00396f 90%); width: 100%; height: 100%; transition: 1s width;
}
li:nth-child(2) div { background: -webkit-radial-gradient(closest-corner, rgba(16, 47, 70, 0) 60%, rgba(16, 47, 70, 0.2)), -webkit-linear-gradient(108deg, #e0da81, #e0a681 10%, #0f1b58 90%);
}
li:nth-child(3) div { background: radial-gradient(circle farthest-side at right bottom, #f8cdda, #1d2b64 80%, #0e153a);
}
li:nth-child(4) div { background: -webkit-radial-gradient(closest-corner, rgba(16, 47, 70, 0) 60%, rgba(16, 47, 70, 0.26)), -webkit-linear-gradient(108deg, #26d0ce, #1a2980 90%);
}
span { position: absolute; top: 0; right: 0; z-index: 3; color: white; background-color: rgba(0, 0, 0, 0.7); padding: 7px 9px; margin: 4px 9px; cursor: pointer; font-size: 1.5em; opacity: 0; transition: 200ms opacity;
}
.show-x span { opacity: 1;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <ul> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li>
</ul>
<span>×</span> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Beautiful gradients, Expanding collums - Script Codes CSS Codes
* { box-sizing: border-box;
}
body, html { position: relative; width: 100%; height: 100%;
}
ul { margin: 0; padding: 0; width: 100%; height: 100%; position: relative;
}
li { display: inline-block; height: 100%; width: 25%; border-right: 1px solid white; cursor: pointer; position: absolute; top: 0; transition: .3s width .2s, left .2s, 100ms z-index .6s;
}
li:nth-child(2) { left: 25%;
}
li:nth-child(3) { left: 50%;
}
li:nth-child(4) { left: 75%;
}
li.active { width: 100%; z-index: 1; transition: .3s width .2s, left .2s; border-right: none; left: 0;
}
li:before { content: "Click to Expand"; display: block; width: 100%; height: 100%; font-weight: bold; background-color: rgba(255, 255, 255, 0.2); text-align: center; padding-top: 40%; color: white; position: absolute; top: 1; left: 1; transition: 200ms opacity; opacity: 0;
}
li:hover:before { opacity: 1;
}
li:hover.active:hover:before { display: none;
}
div { background: -webkit-radial-gradient(closest-corner, rgba(16, 47, 70, 0) 60%, rgba(16, 47, 70, 0.2)), -webkit-linear-gradient(108deg, #e5e9bf 10%, #00396f 90%); width: 100%; height: 100%; transition: 1s width;
}
li:nth-child(2) div { background: -webkit-radial-gradient(closest-corner, rgba(16, 47, 70, 0) 60%, rgba(16, 47, 70, 0.2)), -webkit-linear-gradient(108deg, #e0da81, #e0a681 10%, #0f1b58 90%);
}
li:nth-child(3) div { background: radial-gradient(circle farthest-side at right bottom, #f8cdda, #1d2b64 80%, #0e153a);
}
li:nth-child(4) div { background: -webkit-radial-gradient(closest-corner, rgba(16, 47, 70, 0) 60%, rgba(16, 47, 70, 0.26)), -webkit-linear-gradient(108deg, #26d0ce, #1a2980 90%);
}
span { position: absolute; top: 0; right: 0; z-index: 3; color: white; background-color: rgba(0, 0, 0, 0.7); padding: 7px 9px; margin: 4px 9px; cursor: pointer; font-size: 1.5em; opacity: 0; transition: 200ms opacity;
}
.show-x span { opacity: 1;
}
Beautiful gradients, Expanding collums - Script Codes JS Codes
$('li').click(function(){ $('ul li').removeClass('active'); $(this).addClass('active'); $('body').addClass('show-x');
});
$('span').click(function(){ $('ul li.active').removeClass('active'); $('body').removeClass('show-x');
})
| Developer | Hans Engebretsen |
| Username | hans |
| Uploaded | August 09, 2022 |
| Rating | 4.5 |
| Size | 4,088 Kb |
| Views | 42,504 |
Do you need developer help for Beautiful gradients, Expanding collums?
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!
Hans Engebretsen (hans) Script Codes
| Name | Size |
| Unfolding Login Form | 39,336 Kb |
| Background-filter toggle | 38,215 Kb |
| Nice textured background | 2,659 Kb |
| Nice Grainy background | 22,550 Kb |
| Instagram API Footer | 4,868 Kb |
| Nav Menu Hover | 4,538 Kb |
| Launch Sign up form | 5,586 Kb |
| Candy Text Typographic Fun | 4,103 Kb |
| Portfolio Home page | 12,664 Kb |
| Image Hover effect | 3,496 Kb |
Create amazing art & images 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 |
| Scifi-style Radio-based Tab | Aaronchuo | 4,427 Kb |
| Pomodoro Clock | Yas46 | 3,328 Kb |
| Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
| Layout 11 | Altynai | 1,690 Kb |
| Price table | Serluk | 5,928 Kb |
| OnScreenAction | Ozgursagiroglu | 2,647 Kb |
| Navier Stoke Fluid Simulation | Esimov | 8,584 Kb |
| 03 - CSS Variables | Run-time | 2,682 Kb |
| APortfolio | Skybutterfly | 5,174 Kb |
| E-mail Template | SoloMDFK | 4,871 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!