Pure CSS Wordpress Fancyboxes

Developer
Izzy Skye
Size
4,789 Kb
Views
20,240
  1. Pure CSS Wordpress Fancyboxes Previews
  2. Pure CSS Wordpress Fancyboxes HTML Codes
  3. Pure CSS Wordpress Fancyboxes CSS Codes
  4. Pure CSS Wordpress Fancyboxes JS Codes

How do I make an pure css wordpress fancyboxes?

This is my custom made fancybox output for many different things that I am using on my website.. What is a pure css wordpress fancyboxes? How do you make a pure css wordpress fancyboxes? This script and codes were developed by Izzy Skye on 27 October 2022, Thursday.

Pure CSS Wordpress Fancyboxes Previews
IQ Test

Pure CSS Wordpress Fancyboxes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Wordpress Fancyboxes</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Imported fonts from google fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Libre+Baskerville' rel='stylesheet' type='text/css'>
<!-- Fancybox Start -->
<div class="wppw-fancy wppw-apply-margins"> <div class="wppw-underlay wppw-shadow wppw-background-color wppw-wobble-inverse"> <div class="wppw-fancybox-margins wppw-wobble"> <div class="wppw-fancybox wppw-skew"> <div class="wppw-info wppw-shadow wppw-skew"> <!-- Put Title Here --> <h2 class="wppw-h2 wppw-swish"><a href="https://asche.co.uk" target="_blank" class="wppw-title-link wppw-font wppw-title-font-color">Title</a></h2> <!-- Place Text Here, limit to 40 words --> <p class="wppw-p wppw-font wppw-text-font-color wppw-justify wppw-swish">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta atque dolorum at dolor, laborum expedita officia quas aperiam fuga porro est quam recusandae veniam! Officia eligendi illo numquam vitae consectetur autem modi facilis corporis vel ex aut, ab dolorem atque?</p> <div class="wppw-link wppw-swish"> <!-- Change Location Here --> <a href="https://asche.co.uk" target="_blank" class="wppw-read-more wppw-link-font-color wppw-background-color" />Read More</a> </div> </div> </div> </div> </div>
</div>
<!-- Fancybox End -->
<!-- Fancybox Start -->
<div class="wppw-fancy wppw-apply-margins"> <div class="wppw-underlay wppw-shadow wppw-background-color wppw-wobble-inverse"> <div class="wppw-fancybox-margins wppw-wobble"> <div class="wppw-fancybox wppw-skew"> <div class="wppw-info wppw-shadow wppw-skew"> <!-- Put Title Here --> <h2 class="wppw-h2 wppw-swish"><a href="https://asche.co.uk" target="_blank" class="wppw-title-link wppw-font wppw-title-font-color">Full Name</a></h2> <!-- Place Text Here, limit to 40 words --> <div class="wppw-image"> <div class="image-placeholder wppw-font">100x100</div> </div> <p class="wppw-p wppw-font wppw-text-font-color wppw-wrap wppw-justify wppw-swish">This is but simply an example profile that rambles on about meaningless things. Rabbits are trolls and squirrels eat nuts, foxes make the weirdest sounds and aren't afraid of the big black.</p> <div class="wppw-link wppw-swish"> <!-- Change Location Here --> <a href="https://asche.co.uk" target="_blank" class="wppw-read-more wppw-link-font-color wppw-background-color" />Read More</a> </div> </div> </div> </div> </div>
</div>
<!-- Fancybox End -->
<div class="change-color-scheme wppw-background-color wppw-font wppw-p wppw-text-font-color wppw-shadow"> <div class="background-color selection-div wppw-shadow"> Change Color Scheme Here: <div class="text-colors"> <div class="form-field"> <label for="color-scheme">Color Scheme:</label><br /> <select name="color-scheme" id="color-scheme"> <option value="#DA4454">Default</option> <option value="crimson">Crimson</option> <option value="wheat">Wheat</option> <option value="aliceblue">Aliceblue</option> <option value="#D90FB7">Magenta</option> <option value="#222">Black</option> </select> </div> <div class="form-field"> <label for="custom-color-scheme">Custom Color:</label> <input type="text" name="custom-color-scheme" id="custom-color-scheme" placeholder="#DA4454" /> </div> </div> <div class="form-field full-width"> Note: Keep color scheme and text color as different. </div> </div> <div class="p-text selection-div wppw-shadow"> Change Text Color and Font Here: <div class="text-colors"> <div class="form-field"> <label for="text-color-choice">Text Color:</label><br /> <select name="text-color-choice" id="text-color-choice"> <option value="#999">Default</option> <option value="crimson">Crimson</option> <option value="wheat">Wheat</option> <option value="aliceblue">Aliceblue</option> <option value="#D90FB7">Magenta</option> <option value="#222">Black</option> </select> </div> <div class="form-field"> <label for="custom-color-text">Custom Color:</label> <input type="text" name="custom-color-text" id="custom-color-text" placeholder="#999" /> </div> </div> <div class="text-font"> <div class="form-field full-width"> <label for="select-choice">Font:</label> <select name="font-choice" id="font-choice"> <option value="'Roboto Slab', serif">Roboto Slab</option> <option value="'Courgette', cursive">Courgette</option> <option value="'Shadows Into Light', cursive">Shadows Into Light</option> <option value="'Indie Flower', cursive">Indie Flower</option> <option value="'Libre Baskerville', serif">Libre Baskerville</option> </select> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pure CSS Wordpress Fancyboxes - Script Codes CSS Codes

/*
* Author: Antonio Lopez Hernandez
* Website: https://asche.co.uk
* Name: Wordpress Fancybox
* Description: This is for styling and animating a div for a fancy styling, ideally in a hero (as of yet it does not change size according to width). Wobble effect best seen on chrome.
*/
.wppw-fancy * {transition:all 0.3s;}
/* Change margins for location of fancybox */
.wppw-apply-margins {margin:20px;}
/* Font Choices */ .wppw-font {font-family: 'Roboto Slab', serif;}
/* Color Schemes */ .wppw-background-color {background-color:#DA4454;} .wppw-title-font-color {color: #DA4454;} .wppw-title-font-color:hover {color: #660000;} .wppw-text-font-color {color: #999;} .wppw-link-font-color {color:#FFF;} .wppw-link-font-color:hover {color:#660000;}
/* Shadow Styles */ .wppw-shadow {box-shadow:0 0 5px #777;}
/* Fancybox stylings */ /* Move the box around */ .wppw-fancy {float:left;height:320px;width:320px;overflow:hidden;box-sizing: content-box !important;} /* Strongly advised not to change these */ .wppw-underlay {z-index:0;position:absolute;height:310px;width:310px;margin:3px 0 0 0;box-sizing: content-box !important;} .wppw-fancybox-margins {position:absolute;margin:-10px -9px;box-sizing: content-box !important;width: 340px;height: 340px;overflow: hidden;} .wppw-fancybox {position:absolute;height:425px;width:450px;margin-top:-60px;margin-left:-93px;padding:20px 40px;overflow:hidden;box-sizing: content-box !important;}
/*Makes it skewed */ .wppw-skew { -webkit-transform: skew(45deg,0deg); -moz-transform: skew(45deg,00deg); -ms-transform: skew(45deg,00deg); -o-transform: skew(45deg,00deg); transform: skew(45deg,0deg); } .wppw-info.wppw-skew { -webkit-transform: skew(-45deg,0deg); -webkit-transform: skew(-45deg,0deg); -ms-transform: skew(-45deg,00deg); -o-transform: skew(-45deg,0deg); transform: skew(-45deg,0deg); }
/* Text */ .wppw-h2 {font-size: 22px;font-weight: bold;} .wppw-p {font-size:14px;} .wppw-justify {text-align:justify;} .wppw-info {z-index:1;position:absolute;margin:45px 65px;padding:20px 40px;height:279px;width:240px;background-color:#FFF;box-sizing: content-box !important;} .wppw-link {margin-left:65px;position: absolute;bottom: 30px;} .wppw-title-link {text-decoration:none;} .wppw-read-more {border-radius:0.25em;text-decoration:none;font-size:14px;font-weight:bold;padding:7px 15px;} .wppw-wrap {break-word:word-break;} .wppw-image {float: left; padding:4px 10px 4px 0;height:100px;width:100px;} .image-placeholder {background-color:#EEE;box-shadow:0 0 10px #999 inset;text-shadow:0 0 5px #777;color:#FFF;text-align:center;line-height:95px;height:100px;width:100px;}
/* Fully Compatible Animation */ /* Text Swish */ @-webkit-keyframes swish { 0%{-webkit-transform:translate(500px,500px);opacity:0;} } @-moz-keyframes swish { 0%{-moz-transform:translate(500px,500px);opacity:0;} } @-ms-keyframes swish { 0%{-ms-transform:translate(500px,500px);opacity:0;} } @-o-keyframes swish { 0%{-o-transform:translate(500px,500px);opacity:0;} } @keyframes swish { 0%{transform:translate(500px,500px);opacity:0;} } .wppw-swish { -webkit-animation: swish 0.3s linear; -moz-animation: swish 0.3s linear; -ms-animation: swish 0.3s linear; -o-animation: swish 0.3s linear; animation: swish 0.3s linear; } /* On hover wobble */ @-webkit-keyframes wobble { 0%{transform:scale(1,1);} 50%{transform:scale(1.03,1.03);} } @-moz-keyframes wobble { 0%{transform:scale(1,1);} 50%{transform:scale(1.03,1.03);} } @-ms-keyframes wobble { 0%{transform:scale(1,1);} 50%{transform:scale(1.03,1.03);} } @keyframes wobble { 0%{transform:scale(1,1);} 50%{transform:scale(1.03,1.03);} } .wppw-wobble:hover { -webkit-animation: wobble 0.4s linear; -moz-animation: wobble 0.4s linear; -ms-animation: wobble 0.4s linear; animation: wobble 0.4s linear; } @-webkit-keyframes wobble-inverse { 0%{transform:scale(1,1);} 50%{transform:scale(0.97,0.97);} } @-moz-keyframes wobble-inverse { 0%{transform:scale(1,1);} 50%{transform:scale(0.97,0.97);} } @-ms-keyframes wobble-inverse { 0%{transform:scale(1,1);} 50%{transform:scale(0.97,0.97);} } @keyframes wobble-inverse { 0%{transform:scale(1,1);} 50%{transform:scale(0.97,0.97);} } .wppw-wobble-inverse:hover { -webkit-animation: wobble-inverse 0.4s linear; -moz-animation: wobble-inverse 0.4s linear; -ms-animation: wobble-inverse 0.4s linear; animation: wobble-inverse 0.4s linear; }
/*
* Javascript changes to be made by user
* Styles for that area
*/
.change-color-scheme {margin:50px;float:left;height:340px;width:400px;}
.selection-div {margin:20px 0 0 15px;padding:10px;float:left;width:350px;background-color:#FFF;}
.background-color {height:120px;}
.p-text {height:120px;}
.form-field {float:left;padding-top:15px;width:50%;}
.form-field.full-width {width:100%;}

Pure CSS Wordpress Fancyboxes - Script Codes JS Codes

/*
* This section is purely for interactivity, letting the user change options via the box.
*/
/* Lets user use color scheme dropdown to change scheme color. */
$('#color-scheme').change(function(){ var colorScheme = $('#color-scheme').val(); $('.wppw-title-font-color').css('color',colorScheme); $('.wppw-background-color').css('background-color',colorScheme);
});
/* Lets user use text color dropdown to change text color. */
$('#text-color-choice').change(function(){ var colorText = $('#text-color-choice').val(); $('.wppw-text-font-color').css('color',colorText);
});
/* Lets user use font dropdown to change font. */
$('#font-choice').change(function(){ var fontText = $('#font-choice').val(); $('.wppw-font').css('font-family',fontText);
});
/* Lets user input custom color for scheme */
$('#custom-color-scheme').keyup(function(e){ if(e.which == 13) { var colorScheme = $('#custom-color-scheme').val(); $('.wppw-title-font-color').css('color',colorScheme); $('.wppw-background-color').css('background-color',colorScheme); //Checks if value is able to be used var color = $('.wppw-title-font-color').css('color'); if (color.length==0) { $('.wppw-title-font-color').css('color','#DA4454'); $('.wppw-background-color').css('background-color','#DA4454'); } //Resets value of text area $('#custom-color-scheme').val(''); }
});
/* Lets user input custom color for text */
$('#custom-color-text').keyup(function(e){ if(e.which == 13) { var colorScheme = $('#custom-color-text').val(); $('.wppw-text-font-color').css('color',colorScheme); //Checks if value is able to be used var color = $('.wppw-text-font-color').css('color'); if (color.length==0) { $('.wppw-text-font-color').css('color','#DA4454'); } //Resets value of text area $('#custom-color-text').val(''); }
});
Pure CSS Wordpress Fancyboxes - Script Codes
Pure CSS Wordpress Fancyboxes - Script Codes
Home Page Home
Developer Izzy Skye
Username zephyr
Uploaded October 27, 2022
Rating 3.5
Size 4,789 Kb
Views 20,240
Do you need developer help for Pure CSS Wordpress Fancyboxes?

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!

Izzy Skye (zephyr) Script Codes
Name
Material CSS Contact Popup
Pure CSS Loader
Dynamic Spinning Cubes
Small CSS Loading Animation
Unisolated Pure CSS Mobile Nav Spinner
Pure CSS Tab Navigation
Mobile Material Menu Style
Vanilla JS Pattern Locker
Pure CSS Down Arrow
Pure CSS Menu Navigation
Create amazing Facebook ads 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!