Using CSS3 :target Pseudo to make Light box or popup

Share the love!
pure-css3-lightbox-and-popups-using-target

Hello Guys, i am back again with an interesting topic! Today in this post we are going to disqus about pseudo's and will use a CSS3 Pseudo element for making a Popup box which can contain text, images, videos or any other stuff and how to create a pure css3 lightbox without javascript. Mostly before this we use javascript/jquery plugins/scripts to make a popup or lightbox but CSS3 has gave us many new and interesting properties/pseudo's including this :target pseudo. Lets see how to make use of it, lets get started!

What are Pseudo's?

Basically Pseudo is a keyword added with the selector and used to add some effect to the selector or its child elements, if you know a little about CSS you also would know that pseudo are divided in 2 types pseudo-elements and pseudo-classes,there is a lot of difference between them. lets see what is it?

Note: Internet Explorer below IE9 doesn't support all the pseudo's. You can use JS such like Selectvizr for fallback!

Difference between pseudo-elements and pseudo-classes

Pseudo-classes
A pseudo-class always consists of a colon (:) followed by the name of the pseudo-class and optionally by a value between parentheses. Just like - :hover, :visited, :link, :active, :target, :checked etc. Pseudo-class Can only style or can bring effects to your elements, however pseudo-elements Can create a element in the document which is not in the document source.

/* The syntax */
selector:pseudo-classes{
/* Your styles */
}

/* Example */
div:hover{
background: #000;
}

Pseudo-elements
A pseudo-element is made of two colons (::) followed by the name of the pseudo-element as the CSS3 official says, But before CSS 3 single colons were used for both pseudo elements and pseudo classes. CSS 3 differentiates between them with the use of double and single colons. Double colons are to be used on pseudo elements, and single colons are to be used on pseudo classes. Pseudo-elements can create an element in the content that does not exist in the document source. Using such - ::after and ::before pseudo's.

/* The syntax */
selector::pseudo-elements{
/* Your styles */
}
<!-- Example -->
<p>Hello welcome to The</p>
<style type="text/css">
p::after{
content:" Blog.";
}
</style>

<!-- Result will be -->
Hello welcome to The Blog.

Note: Internet Explorer 8 just ignores double colon pseudo's, so we need to use single for that to work in IE.

The method to use :target pseudo

Lets start from the base, How does the target works ? if you know a bit of html there is something we called anchor linking with ids on same page to scroll to a different section on same page the target works on that it is applied when the id of the targeted element is the same as the URL hash of the current page. for example see the below demo-

In the above demo the box has by default black background but when the link is clicked with href value of that id and the window is targeted to that the color was red, it was done by below -

<div id="demo-target">
  I will be red When ill be Targeted!
</div>
<a href="#demo-target"> Target the box </a>

<a href="#" > Reset </a>
#demo-target {
    background: #000;
    color: #FFF;
    text-align: center;
    padding: 20px 5px;
}

#demo-target:target {
    background: #f00;
}
Simply just click the link and to reset use another hash link doesn't matter blank or with id of another element. So hope you got the method now lets start making a simple popup with it!

Popup using :target

So Now we are going to start the Markup for the popup-
As we are using pure CSS so we cant set the popup to be visible after sometime user need to trigger a link so that the popup can be visible!

<div class="popup" id="mypoupid">
  <a href="#" class="popupBg">
  </a>
  <div class="popup-wrapper">
    
    <!-- Your content for the popup -->
    
  </div>
</div>

<!-- the trigger link -->
<a href="#mypoupid">Show popup</a>
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    visibility: hidden;
}
/* Make the popup div visible when it is targeted */
.popup:target {
    visibility: visible;
    left: 0;
}
.popupBg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
/* Cross browser RGBA fix */
    background:rgb(255,0,0);
    background: transparent\9;
    background: rgba(0, 0, 0, 0.8);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000);
    zoom: 1;
}
.popup-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;  
/* Align box in center of browser window */
    width: 500px;  /* Set the width */
    height: 300px; /* Set the height */
    margin-left: -250px;  /* half of width */
    margin-top: -150px;  /* half of height */
}
So this was pretty easy you can check the demo also i have created some different effects but its pretty easy :) Hope you Got it! if not please make a comment, will definitely help you!

Lightbox using :target

So its the time to do some thing without using javascript i mean now a days mostly things are possible with CSS3, so lets create a JavaScript-free lightbox using Pure CSS. The method of this lightbox is simple as All we have to do is hide a lightbox div in the page and make it visible when the window hash is the :target element.So basically we will warp a thumbnail image with link of the lightbox div same as we do for jumping to another section of same page so when the link will be clicked the window hash will be changed and the properties we have defined with the :target pseudo will work. Now to close lightbox we just have to change the window hash so we can use just simply the #. check the below code -

<!-- thumbnail image -->
<a href="#img1" class="trigger">
<img src="images/img1.jpg">
</a>

<!-- lightbox for image 1 -->
<div class="lightbox" id="img1">
<img src="img/img1.jpg">
<a href="#" class="close">Close</a>
</div>
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    visiblity: hidden;
    z-index: 9999;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 9999;
/* Cross browser RGBA fix */
    background: rgb(255,0,0);
    background: transparent\9;
    background: rgba(0, 0, 0, 0.8);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000);
    zoom: 1;
/* lightbox closing effect */
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    -webkit-transform: rotate(0deg) scale(0);
    -moz-transform: rotate(0deg) scale(0);
    -ms-transform: rotate(0deg) scale(0);
    -o-transform: rotate(0deg) scale(0);
    transform: rotate(0deg) scale(0);
    -webkit-transform-origin: right top;
    -moz-transform-origin: right top;
    -o-transform-origin: right top;
    transform-origin: right top;
}

.lightbox:target {
    opacity: 1;
    visiblity: visible;
/* lightbox opening effect */
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    -webkit-transform: rotate(360deg) scale(1);
    -moz-transform: rotate(360deg) scale(1);
    -ms-transform: rotate(360deg) scale(1);
    -o-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
    -webkit-transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    transform-origin: left bottom;
}
/* add max image size */
.lightbox img {
    max-width: 90%;
    height: 100%;
}
/* Align the close button */
.lightbox .close {
    position: absolute;
    top: 2%;
    right: 2%;
    color: #AAA;
}
So the above was example of creating a lightbox with pure css without any javascript, but i don't think it is still very effective for us as we are not going to add the image two times and say the browser load it at the time of loading the page but ohk its just a way to do it!

All done!

So guys, this was a post about Using CSS3 :target Pseudo to make Light box or popup, hope you learned something new and enjoyed please share it if you like it and let me know if you have any problem, question or any better method please make a comment!

Comment with-

Disqus Blogger Google Facebook

0 comments:

Post a Comment

Comments :