Creating Pop Up Window With CSS

Maybe bring up a Pop Up or Overlay window that can only be done by javascript. But with the rapidly increasing power of CSS, we can create simple Pop Up windows. How to? Check it out.

First and foremost, of course, make the html markup first. Without the html file, how can it be made.

Pop Up Window

This is a simple Pop Up window without javascript
This window is popped up by CSS
To close this window, click the close button on the top right

After that save it with the file name index.html or whatever. Then double click the html file.
And… Jeng.. jeng.. jeng..!!! Nothing happened. Yes, yes, we haven’t given the style yet πŸ™‚

popup1

After that create a style.css file and save it in the index.html file folder earlier. Then Type the following script.

{
margins: 0;
padding: 0;
}

body, html {
font-family: Calibri, “times new roman”, sans-serif;
}
The style above is only for resetting the margins and padding, as well as setting the type of font used. Try refreshing your browser, surely the only thing that changes are the margins, padding, and the font type, right. That’s what we did.

popup2

Then, so that the first hyperlink looks like a real button, add the following script.

Then how to hide it. The key is in the visibility: visible that we give the #popup div. Now we change the visibility of the #popup div to hidden. If you don’t know which one to replace, change the #popup script to something like this.

popups {

width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,.7);
top: 0;
left: 0;
z-index: 9999;
visibility: hidden;
}
After your browser is refreshed, the Pop Up window must have disappeared.

popup5

Try clicking the button, nothing will happen, right? Yes, because we haven’t added the last style as well as a key style. Add the following script.

popup:target {

visibility: visible;
}
Save, then refresh your browser. Then click the button. And.. the mission is complete. We have successfully displayed the Pop Up window. To close it, click the close button in the upper right corner (so remember the election).

So, the complete style is as follows.

Since the mission is over, I want to go first. Whoa!? How come you just walk away without giving an explanation!? OK, I’ll explain.
First, we’ve made the pop up window disappear by changing visibility: visible to visibility: hidden. But that’s not enough! To bring it up we have to press the button. Because the target of our hyperlink button is #popup, so to bring it up, we need a pseudo-element (what’s a pseudo-class called!? Because the #popup div knows it will be the target of our hyperlink button. We added the :target pseudo-class to the #popup div and added the visibility: visible style, so that the #popup div reacts when the button is clicked and it becomes the target. Well, that reaction will change visibility: hidden to visibility: visible.
Then to hide the Pop Up window again, we have to click the close button. Well, the close button is the target # alias doesn’t exist. So that when the close button is clicked, it will return to its original state.

Confused huh!? Same, I just type confused. Hehe πŸ˜›

In conclusion : Simple Pop Up Window can be created with CSS even without javascript. This signifies the increasingly great ability of CSS to manipulate anything.

Creating Animated Text Typing Effects With CSS

Text typing animation is usually created with the help of Jquery, but in this article we will try to make it only with CSS.

This animation can of course be used if you want to make some kind of presentation on the website, or just to beautify the website page.

Type
Typing Illustration, credit photo by Janelene Juanillo

This animation is also usually seen on hacked websites, usually the hacker leaves a trail with a message that looks as if it is being typed.

How to Make it?
To make it not too difficult, just a few lines of css code then we can get the effect of typing the text on our website.

HTML Code

Here’s the HTML code used:

Welcome to Tutorial Web Design Indonesia

It can be seen there that we create a class with the name .container-typed.

CSS Code

For the CSS code we use CSS Animation which is a feature of CSS3

.container-typing
{
font-size: 22px;
width: 740px;
whitespace:nowrap;
overflow:hidden;
-webkit-animation: type 5s steps(50, end);
animation: type 5s steps(50, end);
}

@keyframes type{
from { width: 0; }
}

@-webkit-keyframes type{
from { width: 0; }
}
It can be seen in the css code above that we create an animation with the name type and set the animation on the keyframe.

Next add overflow:hidden so that when the animation changes the paragraph size to 0 we won’t be able to see the text. Finally we can add a typing animation with the steps() function

The animation will increase the paragraph size from 0 to 740px, in 50 frames thereby creating the effect that text is being typed.

That’s all for this tutorial, hopefully it will add insight and improve all of our skills.