![\"plain-html\"](\"/19b8700f8d7a075dd16324aff9fb2e1f/plain-html.webp\")
Hello everybody, in this article, we will learn how to make a beautiful accordion with HTML and CSS only! Yes! You heard that right, plain HTML, and CSS with no Javascript at all!
\nFirstly, let's make some markup with HTML. We are going to create a div and give it a class of accordion like so:
<div class="accordion">\n\n</div>Next, inside the accordion div, we will create another div, this time without a class.
<div class="accordion">\n <div>\n \n </div>\n</div>Next up, we will create a checkbox or a radio button. We are creating a checkbox or a radio button so that we can make their checked states open or close the accordion. So if you want to be able to open all accordions at the same time, you will use checkbox, otherwise you will use radio buttons. But in this article, I've chosen to use checkbox.\nWe will give the checkbox an id of section1 and a class of accordion__input.
<div class="accordion">\n <div>\n <input type="checkbox" id="section1" class="accordion__input">\n </div>\n</div>Under the checkbox, we are going to create a label for the checkbox. This label will later on become the head of the accordion tab.
<div class="accordion">\n <div>\n <input type="checkbox" id="section1" class="accordion__input">\n <label for="section1" class="accordion__label">Section #1</label>\n </div>\n</div>Next, we will create a new div and give it a class of accordion__content because it will hold the content of the accordion. In this example, we will make the content of the accordion a paragraph.
<div class="accordion">\n <div>\n <input type="checkbox" id="section1" class="accordion__input">\n <label for="section1" class="accordion__label">Section #1</label>\n <div class="accordion__content">\n <p>\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, earum, magnam? Alias error, placeat! Accusamus accusantium alias eum iure laborum odit porro quaerat? Animi enim id labore officiis quam sint.\n </p>\n </div>\n </div>\n</div>Repeat the div without a class for as many as you want depending on how many accordion tabs you want. In this example, we will use only three of them.
<div class="accordion">\n <div>\n <input type="checkbox" id="section1" class="accordion__input">\n <label for="section1" class="accordion__label">Section #1</label>\n <div class="accordion__content">\n <p>\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, earum, magnam? Alias error, placeat! Accusamus accusantium alias eum iure laborum odit porro quaerat? Animi enim id labore officiis quam sint.\n </p>\n </div>\n </div>\n <div>\n <input type="checkbox" id="section1" class="accordion__input">\n <label for="section1" class="accordion__label">Section #1</label>\n <div class="accordion__content">\n <p>\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, earum, magnam? Alias error, placeat! Accusamus accusantium alias eum iure laborum odit porro quaerat? Animi enim id labore officiis quam sint.\n </p>\n </div>\n </div>\n <div>\n <input type="checkbox" id="section1" class="accordion__input">\n <label for="section1" class="accordion__label">Section #1</label>\n <div class="accordion__content">\n <p>\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, earum, magnam? Alias error, placeat! Accusamus accusantium alias eum iure laborum odit porro quaerat? Animi enim id labore officiis quam sint.\n </p>\n </div>\n </div>\n</div>That's it with the HTML, and it should be looking like this:\n
Now let's start playing with the CSS part.\nWe'll begin by styling the div with the class of accordion.\nWe will give it a:
max-width to set a size for it.box-shadow to provide it with a beautiful shadow.border-radius to give it nice, rounded corners.overflow to hide the content of the accordion tab when it is closed.background-color to set the color of the accordion tabs.So now we have:
\n.accordion{\n max-width: 400px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n border-radius: 15px;\n overflow: hidden;\n background-color: purple;\n}Now we will set some padding to the label and content so that there is some space between them and their borders.
\n.accordion__label, .accordion__content{\n padding: 14px 20px;\n}Next, we will style the accordion label and set the following properties:
\ndisplay: block to make the label take the full width of the accordion.color: white to make the text of the label white.font-weight: bold to make the text of the label bold.cursor: pointer to make the cursor pointer when it hovers on the label. It is important to make the user know that the label can be clicked.transition: background-color 0.1sposition: relativeSo it looks like this when combined:
\n.accordion__label{\n display: block;\n color: white;\n font-weight: bold;\n cursor: pointer;\n position: relative;\n transition: background-color 0.1s;\n}Now, we will make the color of the label darker when the user hovers on it. This is also to make the user know that he/she has placed the cursor on something that can be clicked.
\n.accordion__label:hover{\n background-color: rgba(0, 0, 0, 0.1);\n}Next up, we will style the content of the accordion and set the following properties:
\nbackground: white to make the background color of the content of the accordion white.line-height: 1.6 to increase the line-height of the text in the content.font-size: 0.85em to set the font size of the text of the content.display: none this is the most important property here so that we can hide the content of the accordion tab by default until the label is clicked.So when we put it together, we have this:
\n.accordion__content{\n background: white;\n line-height: 1.6;\n font-size: 0.85em;\n display: none;\n}Now we have to hide the checkbox from showing. To do that, we set the display property of it to none
.accordion__input{\n display: none;\n}The next thing to do is to show the accordion tab's content if the label is clicked. To do this, we have to set the display property of it to block when the label is clicked. We can know that the label is clicked using the check-state of the checkbox that we hid earlier.
.accordion__input:checked ~ .accordion__content{\n display: block;\n}Hurray🎉, we now have a lovely and functioning accordion that looks like this\n![\"css3-accordion\"](\"/801b7f59d5ed921cced11be75e09e97f/css3-accordion.webp\")
POPUPS! They can annoy you but if used properly, they can be a boon to any marketing campaign. In 2015, Taylor wrote an article on best practices to use popup. While the article discussed how to optimize popup, in this article I am going to list down the types of articles and how you can implement them. I have added codes for every type of popup for a better idea.
\n![\"Creating](\"/bd47340195d928fb4ee883951c59b738/Creating-a-simple-pop-up.webp\")
This section talks about creating a basic popup using simple HTML and CSS. There is a separate section for header, footer and content. I have also added a close button at top right corner of the popup. There are three steps to create this popup.
\n&amp;lt;div class="popup-content"&amp;gt;\n&amp;lt;span class="popup-close"&amp;gt;&amp;amp;times;&amp;lt;/span&amp;gt;\n&amp;lt;div class="popup-header"&amp;gt;Header&amp;lt;/div&amp;gt;\n&amp;lt;div class="popup-body"&amp;gt;\n&amp;lt;p&amp;gt;Your popup code goes here&amp;lt;/p&amp;gt;\n&amp;lt;/div&amp;gt;\n&amp;lt;div class="popup-footer"&amp;gt;Footer&amp;lt;/div&amp;gt;\n&amp;lt;/div&amp;gt;\n&amp;lt;/div&amp;gt;\\&lt;style&gt;\n.popup-layout {\nposition: fixed;\nz-index: 1;\nleft: 0;\ntop: 0;\nwidth: 100% ;\nheight: 100% ;\noverflow: auto;\nbackground-color: rgb(0, 0, 0);\nbackground-color: rgba(0, 0, 0, 0.4);\n}\n.popup-header,\n.popup-footer{\nbackground: #29f;\npadding: 20px;\ncolor: #fff;\nfont-weight: bold;\n}\n.popup-body{\npadding: 20px;\n}\n.popup-content {\nbackground-color: #fefefe;\nmargin: 15% auto;\nborder: 1px solid #888;\nwidth: 60% ;\n}\n.popup-close {\ncolor: #FFF;\nmargin: 10px;\nfloat: right;\nfont-size: 28px;\nfont-weight: bold;\n}\n.popup-close:hover,\n.popup-close:focus {\ncolor: black;\ntext-decoration: none;\ncursor: pointer;\n}\n&lt;/style&gt;Moreover, you can also check out this tutorial of creating a basic popup if you want to learn the basic understanding.
\n&amp;lt;script&amp;gt;\nvar popup\\_close = document.getElementsByClassName('popup-close');\nfor (var i = 0; i &amp;lt; popup\\_close.length; i++) {\nvar closeThis = popup\\_close\\[i\\];\ncloseThis.addEventListener("click", function () {\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "none";\n}, false);\n}\n&amp;lt;/script&amp;gt;![\"Creating](\"/4a93f6818c189a0fb1ca01cb37f962ff/Creating-a-timer-based-popup.gif\")
This is a timer based popup which can be displayed at a certain time after the page is loaded.
\nFor reference, I have added the code to display the popup after 5 second [Add following code]. Steps are as below.
\nFollow all the steps mentioned in section 1. (Creating a simple popup) and add the following code below that code.
\n&amp;lt;script&amp;gt;\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "none";\nsetTimeout(function () {\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "block";\n}, 5000);\n&amp;lt;/script&amp;gt;To Auto hide after 5 second, add following code.
\n&amp;lt;script&amp;gt;\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "block";\nsetTimeout(function () {\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "none";\n}, 5000);\n&amp;lt;/script&amp;gt;This one shows up when you scroll down the page. I have set it to 500 pixels, you can change as per requirements
\n&amp;lt;script&amp;gt;\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "none";\nwindow.onscroll = function () {\nif (document.body.scrollTop &amp;gt; 500 || document.documentElement.scrollTop &amp;gt; 500) {\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "block";\n}\n}\n&amp;lt;/script&amp;gt;Pretty much the same as above but this one shows popup after 5 seconds of scrolling .
\n&amp;lt;script&amp;gt;\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "none";\nwindow.onscroll = function () {\nif (document.body.scrollTop &amp;gt; 500 || document.documentElement.scrollTop &amp;gt; 500) {\nsetTimeout(function () {\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "block";\n},5000 }\n}\n&amp;lt;/script&amp;gt;![\"Creating](\"/c718dfa91184e4494f4d856fd051d640/Creating-an-exit-popup.gif\")
Only confirmation alert popup will show and you can’t make changes in html of this popup. Use following line of code on a single page.
\n&amp;lt;script&amp;gt;\nwindow.onbeforeunload = function() {\nreturn "You are about to leave"\n}\n&amp;lt;/script&amp;gt;There is another variation you can make here. In this scenario, if the user moves his cursor beyond the browser screen, you can create a popup to convince the user to stay. Below is the line of code you will need.
\n&amp;lt;script&amp;gt;\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "none";\ndocument.addEventListener("mouseout", function (event) {\ndocument.getElementsByClassName('popup-layout')\\[0\\].style.display = "block";\n});\n&amp;lt;/script&amp;gt;So guys, I hope this guide helped you through various types of popups. If you love animating your pop-up, you might want to check out this tutorial of creating an animated CSS pop-up. Do try them and let us know your experiences.
\n","frontmatter":{"date":"April 20, 2017","updated_date":null,"title":"Know The Types of Website Popups and How to Create Them","tags":["CSS"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/d404c01e7d4da26cf8ec6404c910921c/5239a/The-Ultimate-guide-to-website-pop-ups.webp","srcSet":"/static/d404c01e7d4da26cf8ec6404c910921c/61e93/The-Ultimate-guide-to-website-pop-ups.webp 200w,\n/static/d404c01e7d4da26cf8ec6404c910921c/1f5c5/The-Ultimate-guide-to-website-pop-ups.webp 400w,\n/static/d404c01e7d4da26cf8ec6404c910921c/5239a/The-Ultimate-guide-to-website-pop-ups.webp 560w","sizes":"(max-width: 560px) 100vw, 560px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/csshtml-animated-dropdown-navigation/"},"html":"What's one thing virtually every website has? If you said navigation (you did) you're absolutely right! Go ahead and enjoy that wonderful feeling of being right for a moment... and now that we're feeling like a champ, let's get to it.
\nNavigation buttons, depending on your site of course, are likely going to be some of the most commonly used items on your web site. Typically they're found near the top so people can quickly and easily... well navigate of course! With this in mind it's worth it to make sure your navigation is both visually appealing and provides an enjoyable user experience.
\nA common featured for navigation menus is the drop down functionality for displaying sub options. This can be achieved through Javascript if you really feel like it (you don't), but why bother with that when CSS3 offers a much more elegant solution!
\nFirst we start out building a simple un-ordered list, and give it some list items each of which contain a link that point nowhere in particular.
\n![\"dropdownscreen1\"](\"/fbd7cd5e46da11bb5f044d594bea4b5f/dropdownScreen1.webp\")
By the way, if you're on Sublime Text there's a great shortcut for making lists: ul>li+li+li+li and then \"Tab\" creates an un-ordered list with 4 list item tags inside of it. For more excellent Sublime tips check out my amigo Lucius' blog post on the topic.
\nNow that we've got the bare bones, let's give this skeleton a spine. We're now going to put another ul inside of those list items, and once again more list items inside of those lists which contain, you guessed it, links to nowhere.
\n![\"dropdownscreen2\"](\"/70d61bff91bfcfcadb8d955c3fc03b44/dropdownScreen2.webp\")
That's all the HTML we have to write for this example, so now we move on to the CSS.
\nThe first few things on the ul's and links are just to remove some default styles that I don't care for.
\nThe first actually relevant style is the inline-block display property on the list items to make them spread out horizontally. If you're unfamiliar with using inline-block for positioning I highly recommend reading up on it because it's an awesome alternative to floats or sometimes even flex-box. Next up we give these list items a relative position, so that the later absolutely positioned sub menu will use this as a reference point.
\n![\"dropdownscreen3\"](\"/0d7ee91a636d3734c5151b472f165f46/dropdownScreen3.webp\")
To quote every MTV cribs star ever, here's where the magic happens. We put a max-height (that is at least as tall as all of the list items on the sub menu) and a height of auto on the sub menu. Note the ul li:hover, meaning these styles only apply when the first level of list items are hovered over. This might seem weird now, but it'll hopefully make sense with the styles we make use of in a bit.
\n![\"dropdownscreen4\"](\"/77e842c9eed15677fb29682214ee71c8/dropdownScreen4.webp\")
Next up we just give the links some padding, which is highly preferable to giving the list item padding because then you can end up with a small hitbox for the actual link and a bunch of dead space around it. Only other thing to note here is the display block on the link which is required for the absolute positioning used later.
\nThe .sub-menu styles are pretty basic, just give it a position of absolute and then top: 100%, left: 0 and width: 100% to make it sit flush below the first level of list items. Finally throw on a transition to really allow the animation to shine, and fine tune the timing if you'd like.
\nStill on the .sub-menu we give it a max-height of 0 and overflow: hidden. What this does is it hides the element from our view, similar to display:none or visibility:hidden... but for our animation we have to do it this way!
\nLastly we give the sub menu list items and links a display of block and some colors because pretty.
\nThat's it, you've now got a simple dropdown navigation with a neat little animation! You can add a height of 0 to the ul .sub-menu as well for a slightly different effect, or play around with the transition time and effect. Much to the same effect, increasing the value of the max-height on the sub menu hover will have an effect on the time it takes the dropdowns to make it to the end.
\n\n","frontmatter":{"date":"December 15, 2015","updated_date":null,"title":"CSS/HTML Animated Dropdown Navigation","tags":["HTML","CSS","UI","CSS Animation"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/de68b801e2b33e38132380ed5dfa2f87/403a4/drop-anim-300x300.webp","srcSet":"/static/de68b801e2b33e38132380ed5dfa2f87/61e93/drop-anim-300x300.webp 200w,\n/static/de68b801e2b33e38132380ed5dfa2f87/403a4/drop-anim-300x300.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Zakary Hughes","github":null,"avatar":null}}}},{"node":{"fields":{"slug":"/engineering/the-truth-about-css-preprocessors-and-how-they-can-help-you/"},"html":"As a preface to this article: preprocessors can be used for a variety of file types, but this article is going to focus solely on CSS preprocessors. Additonally I'm going to try and avoid my personal bias and give a very generic description of CSS preprocessors rather than my preferred preprocessor.
\nFirst off what is a preprocessor? To give you a simple analogy think of speaking with someone, in a language you understand, who has a strong accent or is speaking in a different dialect. They're technically speaking the same language as you, but actually understanding what they're saying can be next to impossible.
\nIn the context of CSS, the \"normal\" or unaccented language would be CSS and the accented version would be the preprocessor! What this means in practice is that you're writing out expressions that resemble standard CSS, but with some very distinct differences with regards to its syntax.
\nAs with regular spoken language, there's not a whole lot we can do with something we can't understand. Luckily there are translators, and the same is true of preprocessors. The preprocessor code can be processed (there are a number of different ways to accomplish this), and then out pops an understandable standard-syntax CSS file ready to be used.
\nNow why would we want to write CSS in some weird way you might ask? An excellent question! Because our nonsense can be translated into regular CSS, this allows us to write some very robust and even dynamic CSS expressions.
\nWith preprocessors we've got a bundle of features now available to be used along with all the standard CSS rules we're accustomed to writing.
\nTo name a few features supported by preprocessors we've got: functions, mixins, math, variables, operators, conditionals, iteration and more to help you be more organized and write less overall.
\nVariables increase your maintainability drastically by making it so you only have to change a value in one place to affect it everywhere it was used. Imagine for example you want to add a Halloween theme to your site's colors.
\n.elementOne {\n background-color: orange;\n}\n.elementOne p {\n color: black;\n}\n.elementTwo {\n background-color: orange;\n}\nh3 {\n color: black;\n}\na:hover {\n color:orange;\n}Changing them back would require you to go and change each instance of black or orange. However; with variables you can do something like this.
\n$theme-color-1: orange;\n$theme-color-2: black;\n \n.elementOne {\n background-color: $theme-color-1;\n}\n.elementOne p {\n color: $theme-color-2;\n}\n.elementTwo {\n background-color: $theme-color-1;\n}\nh3 {\n color: $theme-color-2;\n}\na:hover {\n color: $theme-color-1;\n}Define the value of the variable in one place, and everywhere it gets used will be a reference to that value. Want to change all instances of black back to grey? Just change the variable definition and you're done.
\nAnother one of the biggest features would be functions. With these you can set up one well written function definition and then sit back and let it do all the heavy lifting for you!
\nFunctions combined with math, variables, iteration, and conditionals allows you to write some very dynamic style rules. Think of sprite sheets where the value of the background position is being incremented with each statement. Instead of writing out each one by hand, make a function that uses math and iteration to change the background position.
\nThat's a very simple example, but I've seen some truly impressive and complicated designs created with the use of functions!
\nOne of my favorite features of preprocessors are the new selectors. The parent reference (&) allows you to group your rules so that everything pertaining to a specific element can be grouped together nicely.
\n.someElement {\n some-rule: some-value;\n &:hover {\n color: some-color;\n }\n}Compiles to...
\n.someElement {\n some-rule: some-value;\n}\n.someElement:hover {\n color: some-color;\n}The parent selector takes whatever follows it immediately and tacks it on to the parent that it is nested under. In this case hover will be appended to .someElement. Another great one to check out is the root reference!
\nCSS's default format is ugly as sin. An endless tide of barely indented rules, hopefully organized in some meaningful way. With CSS preprocessors nesting is an awesome feature that helps your rules become more intuitive/logically grouped and increases readability. Nesting can give your CSS a much more distinct visual hierarchy not unlike HTML.
\n.someElement {\n some-rule: some-value;\n .someOtherElement {\n some-rule: another-value\n }\n}Compiles to...
\n.someElement {\n some-rule: some-value;\n}\n.someElement .someOtherElement {\n some-rule: another-value;\n}Full disclosure, your resulting CSS file will still likely look like someone dropped their bowl of Alphaghetti in their bowl of Alphabits and then threw that bowl at a wall. However; the file you actually work in will be considerably prettier, and that's all we care about.
\nSome people have beef with preprocessors because of over done selectors which are a result of going a little too hard with nesting. An easy way to avoid this is by limiting your nesting to 3 levels deep. Any further than that gets pretty ugly, but hey I'm not your supervisor... if you feel it's necessary then you do what you gotta do.
\nNow depending on how you choose to have your preprocessor code processed these features may or may not be more/less accessible. That being said I still feel they are worth mentioning.
\nAuto updating the page you're working on is a small perk but I remember being quite happy to find out I could just save my project and not have to spam F5 like my little sister trying to buy front row Justin Bieber tickets online. Just save and it will update your project automatically.
\nAnother one is vendor prefixes. There are a handful of ways to stop writing these things out by hand each time. Whether it's via mixins, functions or a built in feature of the processor itself you can avoid writing out these dreadfully monotonous prefixes for good.
\nAt first it might seem like a bunch of new stuff you have to learn and implement... but really if you already know CSS you're over halfway there. All you need to do is learn the specific syntax and familiarize yourself with the new features available to you with the preprocessor of your choice. It's a gentle learning curve with a surplus of benefits to integrate preprocessors into your workflow.
\nThis article is by no means all encompassing, but rather a sampler to create enough interest to try it out and learn more about preprocessors.
\nOn that note there are resources for comparing the preprocessors as well as trying them online. Each one has its own perks so try 'em out and find the one that fits your style!
\n","frontmatter":{"date":"November 17, 2015","updated_date":null,"title":"The truth about CSS preprocessors and how they can help you","tags":["CSS"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/c1a3c2e9cd169b0cb2976078dc054b7b/e7487/desdev-150x150.webp","srcSet":"/static/c1a3c2e9cd169b0cb2976078dc054b7b/e7487/desdev-150x150.webp 150w","sizes":"(max-width: 150px) 100vw, 150px"}}},"author":{"id":"Zakary Hughes","github":null,"avatar":null}}}},{"node":{"fields":{"slug":"/engineering/ab-use-css2-sibling-selectors/"},"html":"Hey there, spider. It’s me again, your amazing blog writer, Darryl. Have you ever wanted to select the second or third child of an element without using CSS3 nth-child —which aren’t working on grandpa browsers. Let’s face it, a lot of human beings are afraid of change that they tend to stick to what they know.
\nI’m not a pro “support the older browser” kind of guy because I still think that people won’t upgrade if we keep spoiling them. But for the sake of knowing a workaround I’m gonna teach you how to ab-use sibling selectors for better compatibility.
\nSibling selectors consists of a squiggly line ( ~ ) and a plus sign ( + ).
\nSquiggly line selects all the siblings below that element where you use that sign. Plus sign select only the next sibling.
\n![\"lr-home\"](\"/abd7ca3edfcf0936a62d81dd2468015d/lr-home.webp\")
Have you ever seen our support docs?
\nWould you believe me if I tell you that from “Getting Started” to the “Social Sharing” section, they are all siblings with the same class and everything… well except for the css code and the search, we’ll get to that later.
\nAnyhoo, how did I do it? It’s easy, since I know that the sibling I want to get was the first child. I just used the :first child pseudo element to style the first element.
\n.sibling:first-child {\n/*styles for first sibling*/\n}Then again, that’s not a sibling selector, that’s a pseudo element. Calm your feets, this is the part where we ab-use those selectors.
\n.sibling:first-child ~ .sibling {\n/*styles for the rest of the sibling*/\n}Why would we do this? This is so it doesn’t add the style for the rest of the sibling to the first-child and vice versa. Less CSS to overwrite and eliminates the use of !important.
\nHow do we get the third child without using :nth-child pseudo element? It’s simple. Get the first child and ab-use your plus sign(+) sibling selector.
\n<div:first-child + div + div {\n/*styles*/\n}The best part is. It’s backwards compatible.
\nWhat about the 12th child? Well, you can just painfully type all those “+ div”.
\nNow, why would we do this? To support IE8, which I don’t like supporting but, maybe you do.
\nKeep experimenting with this technique and be free from any restrictions of IE8.
\n","frontmatter":{"date":"August 18, 2015","updated_date":null,"title":"How to ab-USE CSS2 sibling selectors","tags":["Engineering","Selector","CSS"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/bc4587907a3f51743e5602c5512e6236/7fbdd/sibling-selectors.webp","srcSet":"/static/bc4587907a3f51743e5602c5512e6236/61e93/sibling-selectors.webp 200w,\n/static/bc4587907a3f51743e5602c5512e6236/1f5c5/sibling-selectors.webp 400w,\n/static/bc4587907a3f51743e5602c5512e6236/7fbdd/sibling-selectors.webp 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/css3-responsive-icons/"},"html":"What’s up, my neighbor? This is your boy, Darryl Tec. I am here to teach you how to create a responsive and awesomely scalable icon using CSS sprites. On top of that, we will also add a fallback for browsers that do not support SVG files.
\nSVG - Stands for Scalable Vector Graphics. In short it scales perfectly and you don’t need to worry about having a pixelated image anymore.
\nSprite - Google said it’s a fairy. This is not a fairy. It’s just a bunch of different icons in 1 image. Use it as background image and shift the positioning to show 1 icon. This saves you a lot of loading time. Because instead of loading, say 10 images, you’re loading just 1.
\nCSS - Cascading Style Sheet. If you don’t know what this is, I have bad news for ya.
\n![\"icons\"](\"/396a6fac14d2d5aa92551ae4d88a5e46/icons.webp\"){kind=icon}
First things first, we need a sprite image that consists four icons – or more, it’s up to you. Luckily, I have one in my digital pocket.
\nWe’re just going to use a normal PNG file at first and change it later. Make sure it has a transparent background.
\nNow, let’s make their placeholder. The icons you see above is using a grid of 32px by 32px and it’s lining up vertically. I made it like that so it’s easier to find anything, you’ll see why later.
\n</pre>\n <div class="frame"></div>\n<pre>Now we need to style them.
\n.icon {\n width: 32px;\n height: 32px;\n background: #eee;\n float: left;\n background-image: url("[ put your image here ]");\n background-size: 100% auto;\n /*extra fluff*/\n margin: 10px;\n border-radius: 5px;\n}Explanation
\nLooks simple right? But the one thing that’s very important here is the background-size, which makes our sprite responsive. When you put 100% as the value, it will stretch the image depending on what width and height you have. So, be very careful when putting a value on both X and Y axis, because this will distort the image. To stop it from distorting, you should only put a value on one axis and put the other on ‘auto’ so the image scales proportionally.
\nIf you look at the image I provided, there’s only one icon on X-axis. That means we can just say 100% on X and auto on Y.
\nSo, we get background-size: 100% auto.
\nCool, right? No crazy percentage. Your icon should look like this:
\n![\"facebook-icon\"](\"/af1887d5ca8c855ac62128b3b7c5cffb/facebook-icon.webp\"){kind=icon}
It’s time to map those icons properly. Facebook is not a problem because it’s first on the list. But for defaults sake, let’s add a code for it.
\n .icon.facebook {\n background-position: 0 0;\n background-color: #3b5998;\n }The positioning of 0 0 will map it to the top left of the element.
\n![\"here-icon\"](\"/4418d0c0d01a1971865f91b64c9fed43/here-icon.webp\"){kind=icon}
For the background-color, you can get almost all of the official social icon colors in hex here.
\nHow about the rest? Well, there’s a simple formula for that.
\nSince we’re making this responsive, we need to use percentage. We need to get the height of the image via percentage. Remember what I said earlier about x and y and scaling proportionally? Since the icons are lined up vertically, we need to get the Y-axis, which is the height. The easy way to do that is to just use 100% and never touch x axis again.
\nNow, we have to get the position of the icons. Let’s start by counting the icons starting with 0 (zero).
\n0 = Facebook
\n1 = Google
\n2 = LinkedIn
\n3 = Twitter
\nFacebook isn’t really a problem because we already know where it is. So, let’s exclude it from the count. That gives us 3 icons. We can now use those numbers to get the icon position.
\nimageHeight = 100%
\niconCount = 3
\niconPosition = [1, 2 or 3]
\nWe need to go downwards on the sprite. That means it’s negative.
-imageHeight / iconCount * iconPosition
\n-100% / 3 / 1 = 33.33% is Google’s position
\n-100% / 3 / 2 = 66.66% is LinkedIn’s position
\n-100% / 3 / 3 = 99.99% is Twitter’s position
\nThat gives us this code
.icon.twitter {\n background-position: 0 -33.33%;\n background-color: #55acee;\n}\n.icon.linkedin {\n background-position: 0 -66.66%;\n background-color: #007bb6\n}\n.icon.google {\n background-position: 0 -99.99%;\n background-color: #F90101;\n}If you use stylus you can just do this:
\nCreate the mixin
getPos(imageHeight, iconCount, iconPosition)\n imageHeight / iconCount * iconPositionThen call it.
\n.icon.twitter\n background-position 0 getPos(-100%, 3, 1)\n background-color #55acee\n \n.icon.linkedin\n background-position 0 getPos(-100%, 3, 2)\n background-color #007bb6\n \n.icon.google\n background-position 0 getPos(-100%, 3, 3)\n background-color #F90101By now your icon should look like this.
\n![\"color-icons\"](\"/d95ce5167a6a3fd1c07e24eaa853df05/color-icons.webp\"){kind=icon}
It’s time to change that PNG background to an SVG background.
\nand link it to your background image
\n.icon {\n width: 32px;\n height: 32px;\n background: #eee;\n float: left;\n background-image: url("[ put your PNG image here ]”);\n background-image: linear-gradient(transparent, transparent), url("[ <b>put your SVG image here</b> ]”);\n background-size: 100% auto;\n \n/*extra fluff*/\n margin: 10px;\n border-radius: 5px;\n}If you’re wondering why we’re adding 2 background images is because not all browsers support SVG file. The linear-gradient(transparent, transparent) tricks the CSS into falling back to the PNG image if it doesn’t support it.
\nNow, Rescale your width and height and see the magic of responsive icons.
\nAaaaaand then we’re done. That’s how you create a responsive icon.
\n","frontmatter":{"date":"July 21, 2015","updated_date":null,"title":"CSS3 Responsive Icons","tags":["CSS","Responsive","UI"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/8d212eebb7243269b59bd9166d0a4cce/403a4/css3-responsive-icons-300x300.webp","srcSet":"/static/8d212eebb7243269b59bd9166d0a4cce/61e93/css3-responsive-icons-300x300.webp 200w,\n/static/8d212eebb7243269b59bd9166d0a4cce/403a4/css3-responsive-icons-300x300.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/styling-radio-and-check-buttons-with-css/"},"html":"Let's face it, at some point you look at a radio or a checkbox button and you're like... this looks like something that starts with an \"s\" and ends with a \"hit\". I'm here to stop you from saying that word and go on with your life without worrying about those ugly things.
\nWe're just going to use code here. No images, just pure scalable user interface using code. Cool, eh? Let's get started.
\nLet's create our code structure first.
\n<!-- Radio --> \n<label>\n<input type="radio">\n<span>I'm a radio button</span>\n</label>\n<!-- Checkbox -->\n<label>\n<input type="checkbox">\n<span>I'm a checkbox</span>\n</label>If it looks ugly, don't be alarmed. That's normal for an untamed code from the wild. All you gotta do now is to tame it with our very best tool, CSS.
\nFirst thing you have to do is to hide the element that generates the hideous button, which is... DUN DUN DUN... the input tag. Don't worry, we can still trigger it even though it's hidden. How? by nesting it inside the label tag.
\nNow that the default toggles are gone, we need to create our fake —but amazing— toggles.
\nRadio Button
\nWe can't really customize this toggle that much because it needs other toggles to work properly. Let's just prettify it a bit.
\nlabel input[type="radio"] {\n display: none;\n}\nlabel input[type="radio"] ~ span {\n position: relative;\n display: inline-block;\n padding: 3px 0 3px 25px;\n}\nlabel input[type="radio"] ~ span:before {\n content: "";\n position: absolute;\n display: block;\n width: 18px;\n height: 18px;\n background: #fff;\n margin-right: 5px;\n border: 1px solid #ccc;\n border-radius: 50%;\n left: 0;\n top: 0;\n box-sizing: border-box;\n transition: all 300ms ease-in-out;\n}\nlabel input[type="radio"]:checked ~ span:before {\n border: 5px solid #29d;\n}![\"checked-radio\"](\"/d36cc3d6f3b8656bc3c213dd8d697e8b/checked-radio.webp\")
![\"unchecked-radio\"](\"/0d8bd0a9dd2fb37571012a6c7fca93aa/unchecked-radio.webp\")
By now it should like this.
\nCleaner toggles!
\nCheckbox
\nThis one is fun to customize because it has an on and off feature or a switch. Let's start with a simple toggle. We're going to transform this hideous toggle (screenshot) to this beautiful creature (screenshot).
\nlabel.spin input[type="checkbox"] {\n display: none; /*hides ugly toggle*/\n}\nlabel.spin input[type="checkbox"] ~ span {\n position: relative;\n display: inline-block;\n padding: 3px 0 3px 25px; /*adds spacing on the left*/\n}\n/*create our new toggle*/\nlabel.spin input[type="checkbox"] ~ span:before {\n content: "\\2713"; /*add a new check mark*/\n text-align: center;\n font-size: 13px;\n position: absolute;\n display: block;\n width: 18px;\n height: 18px;\n background: #fff;\n color: #fff;\n margin-right: 5px;\n border: 1px solid #ccc;\n border-radius: 50%;\n left: 0;\n top: 0;\n box-sizing: border-box;\n transition: all 500ms ease-in-out;\n}\n/*if checked do this*/\nlabel.spin input[type="checkbox"]:checked ~ span:before {\n transform: rotatez(360deg);\n background: #29d;\n border-color: #29d;\n}Oh yes! Beautiful toggle.
\n![\"checked-check\"](\"/3607cca80217d22bad9c57e44caf3756/checked-check.webp\")
![\"unchecked-checkbox\"](\"/84a77f006447163b34d99200a668ffc1/unchecked-checkbox.webp\")
Bonus!
\nHave you ever seen those toggles where it slides to the left and right when you click it? Did you know you can do that too using CSS? Let's try it.
\nFirst, we're going to design the default look of an unchecked checkbox. By now you know that we need to hide the default toggle.
\nlabel input[type="checkbox"] { display: none; }And then add a space on the left of the span using padding. While you're there, add a position relative to because we need to contain the rest of the elements inside the span.
\nlabel input[type="checkbox"] ~ span { position: relative; display: inline-block; padding: 3px 0 3px 35px; }Now, let's create our toggles using CSS pseudo element :before and :after. Why? Because generated CSS is easier to handle.
\nlabel input[type="checkbox"] ~ span:before, label.slide input[type="checkbox"] ~ span:after {\n content: "";\n position: absolute;\n display: block;\n width: 18px;\n height: 18px;\n background: #fff;\n margin-right: 5px;\n border: 1px solid #ccc;\n left: 0;\n top: 0;\n box-sizing: border-box;\n transition: all 300ms ease-in-out;\n}This will generate a box looking element. Since it's targeting both pseudo elements, they will look identical and on top of each other.
\nIt's time to start prettifying those pseudo elements.
\nFor :after, since this is the background where the :before toggle slides through. We need to modify the width to look bigger. Add an inset shadow to make it look like it's pushed through and a red background for an \"off\" effect.
\nlabel input[type="checkbox"] ~ span:before {\n width: 30px;\n border-radius: 20px;\n box-shadow: inset 0 2px 5px -1px rgba(0, 0, 0, 0.4), inset 0 -2px 0 -1px rgba(255, 255, 255, 0.2);\n background: #F22613;\n}For :before, we just need to make it look like a circle and lift it off a bit using box-shadow.
\nlabel.slide input[type="checkbox"] ~ span:after {\n box-shadow: 0 3px 4px -2px rgba(0, 0, 0, 0.5);\n border-radius: 50%;\n}The \"on\" part just needs a little bit of pushing to the side and changing the background to blue or green.
\nlabel.slide input[type="checkbox"]:checked ~ span:before {\n background: #29d;\n}\nlabel.slide input[type="checkbox"]:checked ~ span:after {\n left: 13px;\n}The CSS is a bit longer here because there's a lot of elements that need to change, but take a chill pill because CSS won't slow your page down.
\nAnd that's it. Your pretty checkbox or radio button toggles.
\n","frontmatter":{"date":"June 16, 2015","updated_date":null,"title":"Styling Radio and Check buttons with CSS","tags":["CSS"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/20127eac7a49d6d333dd2483a84b5c4c/7fbdd/radio-check-buttons-css-1.webp","srcSet":"/static/20127eac7a49d6d333dd2483a84b5c4c/61e93/radio-check-buttons-css-1.webp 200w,\n/static/20127eac7a49d6d333dd2483a84b5c4c/1f5c5/radio-check-buttons-css-1.webp 400w,\n/static/20127eac7a49d6d333dd2483a84b5c4c/7fbdd/radio-check-buttons-css-1.webp 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/create-a-loading-spinner-using-css/"},"html":"Hey there, yogi bear. Tired of creating gifs? Seriously, that takes time and most of the time it has a huge file size and a crappy resolution. What if you can create a gif(ish) element out of CSS? Because you can.
\nCSS has come a long way we can now create our own GIF-ish contents and the best part, we have full control over it.
\n![\"yeah-css\"](\"/c26360b02b3fe566935aabf93fa63acd/yeah-css.webp\")
Great, how do I do it?
\nFirst things first, we need our html structure that will hold all the things we need. There's the container:
\n<div class="container"> <!--There's the container that centers it-->\n <div class="spinner-frame"> <!--The background-->\n <div class="spinner-cover"></div> <!--The Foreground-->\n <div class="spinner-bar"></div> <!--and The Spinny thing-->\n </div>\n</div>Easy, right? Now we need to add them styles to our html's.
\n.container {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n text-align: center;\n background: #eee;\n}\n.container:before {\n content: "";\n height: 100%;\n display: inline-block;\n vertical-align: middle;\n}Since, it's a spinner and normally covers the whole page. The combination of \"position: fixed\" and bottom, top, left, right as 0 will do that for you. ( We don't want the users to click everywhere, right?).
\nThe :before pseudo element will help you center the spinner correctly (without the help of negative margins). How? If you look at the container class, it has a \"text-align: center\" which aligns inline elements like the pseudo element :before. But, we need to add height on that thing and inline elements do not like that. So, we need to change the display from inline to inline-block and add \"vertical-align: middle\" so it aligns vertically.
\nNow the for the fun stuff.
\nWe need to style the spinner frame.
\n.container .spinner-frame {\n display: inline-block;\n vertical-align: middle;\n width: 100px;\n height: 100px;\n border-radius: 50%;\n position: relative;\n overflow: hidden;\n border: 5px solid #fff;\n padding: 10px;\n}A couple of things here. Since it's a DIV, by default it's a block element. We need to change that to an inline-block so it accepts the text-align and centers itself with the :before pseudo element. Then add a \"vertical-align: middle\" and viola!! Centered!
\nA spinner won't be a spinner if it's not a circle. A 50% border-radius will work properly if you have a perfect 1:1 ratio. Now we need to push everything inside (and automatically center it), adding consistent padding will do that for you.
\nNow for the foreground or spinner-cover.
\n.container .spinner-frame .spinner-cover {\n background: #fff;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n position: relative;\n z-index: 2;\n}This will add a white cover on top of the spinner and hide everything that we don't need inside it. You know what they say... If you can't remove it, hide it.
\nFor the spinny thing:
\n.container .spinner-frame .spinner-bar {\n background: #29d;\n width: 50%;\n height: 50%;\n position: absolute;\n top: 0;\n left: 0;\n border-radius: 100% 0 0 0;\n -webkit-animation: spinny 2s linear infinite;\n transform-origin: 100% 100%;\n}\n@-webkit-keyframes spinny {\n 0% {\n transform: rotate(0deg);\n background: #29d;\n }\n 50% {\n transform: rotate(180deg);\n background: #00427c;\n }\n 100% {\n transform: rotate(360deg);\n background: #29d;\n }\n}This one needs more advance CSS in it because this is the only thing that moves.
\nWe need to tell the element that the center point is not on the center of the element but on the bottom right edge where it spins. The CSS \"transform-origin: 100% 100%\" will do that easily for you.
\nSince it's an animated element, overflow hidden (for some reason) doesn't work on this guy. So, we need to curve to top left part of it. The CSS \"border-radius: 100% 0 0 0\" will do that for you.
\nWe also need to push it on the top left where it starts spinning \"position: absolute\" with top and left 0 will push it there.
\nNow we need to animate it using key-frames. From 0% to 100% the \"transform: rotate()\" from 0 degrees (0deg) to 360 degrees (360deg) will rotate it forever. FOREVER!
\nA tutorial wouldn't be complete without a demo.
\nSee the Pen azVwqj by Darryl Tec (@notdarryltec) on CodePen.
\n","frontmatter":{"date":"May 05, 2015","updated_date":null,"title":"Loading spinner using CSS","tags":["CSS","Loader"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/7892c56df8d6f6a460669e168ad41a70/7fbdd/css3-loading-spinner.webp","srcSet":"/static/7892c56df8d6f6a460669e168ad41a70/61e93/css3-loading-spinner.webp 200w,\n/static/7892c56df8d6f6a460669e168ad41a70/1f5c5/css3-loading-spinner.webp 400w,\n/static/7892c56df8d6f6a460669e168ad41a70/7fbdd/css3-loading-spinner.webp 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/animating-simple-css-popup-tutorial/"},"html":"By now you’ve probably seen the cool and simple way(not to mention, without using jQuery) of creating a popup by Zoie Carnegie. If not, you can click this link to go and follow that tutorial. Cool?
\nOnce you’re done creating your css popup. We’re now going to animate it with CSS3. Why? because we’re tired of seeing things that just pop onto users screen and you don’t know where it came from. Also, to make it fun for your users. Let's get started.
\nFirst things first. CSS3 animations don't work on \"display: none\" or \"block\". So, we need to modify Zoie's code to not do that and just simply add and remove the relevant class.
\n// Close Popup Event\nclosePopup.onclick = function() {\n overlay.className = ''; /*This removes all classes, use at your own risk*/\n popup.className = ''; /*This removes all classes, use at your own risk*/\n};\n// Show Overlay and Popup\nbutton.onclick = function() {\n overlay.className = 'show';\n popup.className = 'show';\n}We need to modify the CSS too.
\n#popup {\n visibility: hidden;\n opacity: 0;\n z-index: -1; /*hide it in the back of the page*/\n}\n#overlay {\n visibility: hidden;\n opacity: 0;\n z-index: -1; /*hide it in the back of the page*/\n}Now, why did I do that? Since, we can't use display: none, we need to find a way to hide it differently. CSS3 animation works perfectly with \"visibility: hidden\", \"opacity\" and \"z-index\". I know it's a bit more CSS but, I assure you that it's worth it.
\nSlide Down
\nLet's start with a simple one. Sliding them pops, yo!
\n/*Add defaults*/\n#popup {\n top: -50%; /*Put it on the very top*/\n transition: all .5s ease-in-out; /*make it smooth*/\n}\n/*Now show it*/\n#popup.show {\n visibility: visible;\n z-index: 200;\n opacity: 1;\n top: 50%; /*slide it down smoothly*/\n}\n#popup.show ~ #overlay {\n opacity: 1;\n visibility: visible;\n z-index: 100;\n}The \"top: -50%\" will push our pop-up outside while \"top: 50%\" will bring it back to the center. Now, combine it with a CSS transition and it will gracefully slide down along with the fading effect of opacity. Pretty neat huh? How about making it pop up from the center of the page? I mean it's called \"pop-up\" for a reason right?
\nWe can achieve that effect by using the same code we made earlier. Just change the \"top: -50%\" to \"transform: scale(0)\". This will scale our beloved pop-up to a small size. The showing it part will have to change too. Same as the default, change the \"top: 50%\" to \"transform: scale(1)\". This will then scale it back to original size.
\n/*Add defaults*/\n#popup {\n transform: scale(0) /*scale it to a smaller size*/\n transition: all .5s ease-in-out; /*make it smooth*/\n}\n/*Now show it*/\n#popup.show {\n visibility: visible;\n z-index: 200;\n opacity: 1;\n transform: scale(1) /*scale it to a default size*/\n}\n#popup.show ~ #overlay {\n opacity: 1;\n visibility: visible;\n z-index: 100;\n}Want to try something different than that? I got your back.
\nSwirly Pop
\nHave you heard of CSS keyframes? We're going to use that to achieve what we want. I just want to say first that CSS keyframes do not work on older browsers like IE8 and IE9. Use this trick at your own risk.
\nThe keyframes code looks like this
\n@keyframes pop-swirl {\n 0% {\n transform: scale(0) rotate(360deg);\n }\n 60% {\n transform: scale(0.8) rotate(-10deg);\n }\n 100% {\n transform: scale(1) rotate(0deg);\n }\n}The word \"pop-swirl\" is the variable we need to call later on to trigger that animation or keyframe. You can name this to whatever you want, there are no restrictions. The animation works by specifying your start and end points. There's 2 ways you can do that, either by using \"from\" and \"to\" or \"0%\" to \"100%\". I prefer the 2nd way because you can add like 100 keyframes to it.
\nCalling that code will need the help of an \"animation\" tag. This is like a transition but more advanced. I also like to point out that right now, It's not fully supported yet but you can still use it by appending your vendor prefix like \"-webkit-\". Like this...
\n\\-webkit-animation: pop-swirl 1s ease forwards;Let's break this down
\n-webkit- = Vendor prefix.
\nanimation = Used to call the keyframes.
\npop-swirl = The variable we used on keyframes.
\n1s = Duration of animation.
\nease = Timing function. This can also make the animation smoother.
\nforwards = This is the animation play state.
Using the same method as Slide Down and Pop In. We just need to remove top or transform tags and add the animation tag in it.
\n/*Don't need the defaults*/\n/*Now show it*/\n#popup.show {\n -webkit-animation: pop-swirl 1s ease forwards; /*trigger the keyframe*/\n visibility: visible;\n z-index: 200;\n opacity: 1;\n}\n#popup.show ~ #overlay {\n opacity: 1;\n visibility: visible;\n z-index: 100;\n}Bonus!
\nThe Anvil Effect
\nLet's shock your screen with this heavy pop-up. You can achieve the anvil effect by using this code.
\n@keyframes anvil {\n 0% {\n transform: scale(5) rotate(0);\n opacity: 0;\n box-shadow: 0 0 0 rgba(241, 241, 241, 0);\n }\n 50% {\n transform: scale(1) rotate(-0.2deg);\n opacity: 1;\n box-shadow: 0 0 0 rgba(241, 241, 241, 0.5);\n }\n 75% {\n transform: scale(1) rotate(0.2deg);\n opacity: 1;\n box-shadow: 0 0 250px rgba(241, 241, 241, 0.5);\n }\n 100% {\n transform: scale(1) rotate(0);\n opacity: 1;\n box-shadow: 0 0 500px rgba(241, 241, 241, 0);\n }\n}\n#popup[data-pop="anvil"].show {\n -webkit-animation: anvil 1s cubic-bezier(0.38, 0.1, 0.36, 0.9) forwards;\n visibility: visible;\n z-index: 200;\n opacity: 1;\n}\n#popup[data-pop="anvil"].show ~ #overlay {\n opacity: 1;\n visibility: visible;\n z-index: 100;\n}Of course a tutorial won't be complete without a demo.
\nSlide Down Demo Pop In Demo Pop Swirl Demo Anvil Demo
\nAnd there you have it. A little something to spice up your pop-up game. I hope this helps you woo your users and entertain them. Until next time. Cheers.
\n","frontmatter":{"date":"March 23, 2015","updated_date":null,"title":"Animate the modal popup using CSS","tags":["Slide","CSS","Swirl","PopUp"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/fd58cd8b2750bcda4251057bf96d6b25/ad85c/simplepop.webp","srcSet":"/static/fd58cd8b2750bcda4251057bf96d6b25/61e93/simplepop.webp 200w,\n/static/fd58cd8b2750bcda4251057bf96d6b25/1f5c5/simplepop.webp 400w,\n/static/fd58cd8b2750bcda4251057bf96d6b25/ad85c/simplepop.webp 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/css-responsive-grid/"},"html":"I know what you're thinking. Why am I writing this blog? There's like a bunch of apps out there that do this thing automatically. See, that's the problem, \"automatically\". That means you have no control over it when it messes things up. Even if you do, you might mess things up for other stuff too.
\nThis is why controlling your own code is better than letting other apps do it. Just like what my mentor said, \"Don't let the apps write your own code, they screw it up\".
\nLet's get started
\nLet's make a responsive grid without using any crazy percentages or complicated margins. Sounds cool? Good.
\nBy now you know how complicated it is to calculate all the width and margins to make sure they correspond with each other. Not to mention that you need to use percentages on both of them which sometimes doesn't work, especially with our friend IE8.
\nWhat if we create a grid that doesn't need margins for spacing? Or using percentages to separate objects? Sounds awesome right? No more calculating for the right percentages and getting crazy numbers.
\nLet's start with 4 grids first. So 100 / 4 = 25 then add a percentage (%) sign and we get 25% for our 4 grid system. No crazy numbers there, but we need spacing. To add spaces between those elements just add padding on left and right. Pixels or percent, it's up to you. Yes, yes, padding adds width but, if you add \"box-sizing: border box\" on our lovely grid, the padding will start respecting your decision to add a width of 25% and start pushing everything inside.
\n![\"grid\"](\"/061ca7bb25044306d0f8d74f574250ce/grid.webp\")
There you have it, Spacing. By now your CSS code will look like this.
\ndiv {\n width: 25%;/*4 grid system*/\n padding: 0 5px;/*spacing*/\n box-sizing: border-box;/*removes the added with from padding*/\n float: left; /*put them side by side*/\n}Problem
\nOf course, there's no perfect code. Since we're using padding on both left and right. you'll see some spacing too on the left and right side of your website. For example, I used 5px padding. That means I will have a 5px offset on the left and right side of my screen. It doesn't align with my site anymore.
\nSolution
\nTo tackle this problem we need to add a margin on the parent of our grid. Since my padding is 5px, I need to add a -5px margin on left and right to stretch it back to it's intended size. So our code will look like this now.
\nparent {\n margin: 0 -5px;\n}\nparent div {\n width: 25%;/*4 grid system*/\n padding: 0 5px;/*spacing*/\n box-sizing: border-box;/*removes the added with from padding*/\n float: left; /*put them side by side*/\n}I'd like to also point out that if your parent has a width (which it doesn't really need because our grid css will add a width to the parent), the negative margins won't work. So, be careful.
\nAnother thing to watch out for, because we're using floats, we will also need to use a clearfix hack on our parent.
\nUsing the simple code we learned today will create all the grids you want.
\n1 = 100%
\n2 = 50%
\n3 = 33.33%
\n4 = 25%
\n5 = 20%
\n6 = 16.66%
\n7 = 14.28%
\n8 = 12.5%
\n9 = 11.11%
\n10 = 10%
and so on.
\nSee it on codepen.
\nAnd this is where it ends. I hope this will help you easily create a grid in the near future. If you have any other tips, leave it in the comments and I'll be happy to try it out. Cheers.
\n","frontmatter":{"date":"March 16, 2015","updated_date":null,"title":"CSS Responsive Grid, Re-imagined","tags":["CSS","Grid","Responsive"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/b965f64c315a9fddcd7037c0d1e1441f/ad85c/desdev.webp","srcSet":"/static/b965f64c315a9fddcd7037c0d1e1441f/61e93/desdev.webp 200w,\n/static/b965f64c315a9fddcd7037c0d1e1441f/1f5c5/desdev.webp 400w,\n/static/b965f64c315a9fddcd7037c0d1e1441f/ad85c/desdev.webp 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/simple-popup-tutorial/"},"html":"Creating a popup is a very simple addition to any webpage. In this tutorial, I will show you how to create a popup using basic Html, javascript and CSS. The first thing we want to think about is what we want to do to trigger a popup. You can trigger an event on almost anything such as a button, link or keypress. In this tutorial, we will be clicking on a button to trigger a popup.
\nWhat you will need:
\nLet’s start building the popup
\n<html>\n<head>\n <title>A Simple Popup</title>\n</head>\n<body>\n<div id="maincontent">\n <h1>Page Content<h2>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n <div class="popupcontent">\n <h1>Some Popup Content</h1>\n </div>\n</div>\n</body>\n</html>We’ve created a div with id overlay to cover all the page content when the popup is displayed. This forces the user to close the popup before returning to the page content and also creates a nice user experience. The div with id popup will be our popup containing controls at the top to close the popup and our content area. Currently, this popup has no content and no styling so nothing will show. Let's add some styling next.
\n<html>\n<head>\n <title>A Simple Popup</title>\n <style>\n #overlay {\n position: absolute;\n top: 0;\n bottom: 0;\n background: #999;\n width: 100%;\n height: 100%;\n opacity: 0.8;\n z-index: 100;\n }\n\n #popup {\n position: absolute;\n top: 50%;\n left: 50%;\n background: #fff;\n width: 500px;\n height: 500px;\n margin-left: -250px; /*Half the value of width to center div*/\n margin-top: -250px; /*Half the value of height to center div*/\n z-index: 200;\n }\n </style>\n</head>\n<body>\n<div id="maincontent">\n <h1>Page Content<h2>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n <div class="popupcontent">\n <h1>Some Popup Content</h1>\n </div>\n</div>\n</body>\n</html>We’ve now added some CSS for the overlay and the popup. At this point, we can see a white box above our grey overlay. We’ve added an h1 tag inside our popup a page title and some main page content. We should now see something like this:
\n![\"popup-example-01\"](\"/679b24a2b948be6e4bf5969a7e1331b3/popup-example-01.webp\")
Next let's add a control to close this popup. We’ll add a span containing an X that we can click on to close this popup and JavaScript to handle this event.
\n<html>\n<head>\n <title>A Simple Popup</title>\n <style>\n #overlay {\n position: absolute;\n top: 0;\n bottom: 0;\n background: #999;\n width: 100%;\n height: 100%;\n opacity: 0.8;\n z-index: 100;\n }\n\n #popup {\n position: absolute;\n top: 50%;\n left: 50%;\n background: #fff;\n width: 500px;\n height: 500px;\n margin-left: -250px; /*Half the value of width to center div*/\n margin-top: -250px; /*Half the value of height to center div*/\n z-index: 200;\n }\n\n #popupclose {\n float: right;\n padding: 10px;\n cursor: pointer;\n }\n </style>\n</head>\n<body>\n<div id="maincontent">\n <h1>Page Content<h2>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n <div class="popupcontrols">\n <span id="popupclose">X</span>\n </div>\n <div class="popupcontent">\n <h1>Some Popup Content</h1>\n </div>\n</div>\n<script type="text/javascript">\n // Initialize Variables\n var closePopup = document.getElementById("popupclose");\n var overlay = document.getElementById("overlay");\n var popup = document.getElementById("popup");\n \n // Close Popup Event\n closePopup.onclick = function() {\n overlay.style.display = 'none';\n popup.style.display = 'none';\n };\n</script>\n</body>\n</html>Now we can close this popup…. Ah, that’s nice. Here we’ve added our X to click on, some CSS to style this close area. Also, we’ve added the javascript to handle the click event to hide the popup. Save your file as index.html and open it in your browser to test closing the popup. You’ll notice that the popup is displayed when we first open the page. Let's hide this with CSS on load so that we have to do something to open it.
\n#overlay {\n display: none;\n ...\n}\n \n#popup {\n display: none;\n ...\n}After adding display: none; to our overlay and popup, you’ll notice that when you load the page in your browser we cannot see them. To show this popup we’ll have to do something, so let’s make a button to click on and some JavaScript to handle this event.
\n<html>\n<head>\n <title>A Simple Popup</title>\n <style>\n\t#overlay {\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\tbackground: #999;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\topacity: 0.8;\n\t\tz-index: 100;\n\t}\n\n\t#popup {\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\tbackground: #fff;\n\t\twidth: 500px;\n\t\theight: 500px;\n\t\tmargin-left: -250px; /*Half the value of width to center div*/\n\t\tmargin-top: -250px; /*Half the value of height to center div*/\n\t\tz-index: 200;\n\t}\n\n\t#popupclose {\n\t\tfloat: right;\n\t\tpadding: 10px;\n\t\tcursor: pointer;\n\t}\n\n\t.popupcontent {\n\t\tpadding: 10px;\n\t}\n\n\t#button {\n\t\tcursor: pointer;\n\t}\n </style>\n</head>\n<body>\n<div id="maincontent">\n <h1>Page Content<h2>\n <button id="button">Show Popup</button>\n</div>\n<div id="overlay"></div>\n<div id="popup">\n <div class="popupcontrols">\n <span id="popupclose">X</span>\n </div>\n <div class="popupcontent">\n <h1>Some Popup Content</h1>\n </div>\n</div>\n<script type="text/javascript">\n\t// Initialize Variables\n\tvar closePopup = document.getElementById("popupclose");\n\tvar overlay = document.getElementById("overlay");\n\tvar popup = document.getElementById("popup");\n\tvar button = document.getElementById("button");\n\t// Close Popup Event\n\tclosePopup.onclick = function() {\n\t overlay.style.display = 'none';\n\t popup.style.display = 'none';\n\t};\n\t// Show Overlay and Popup\n\tbutton.onclick = function() {\n\t overlay.style.display = 'block';\n\t popup.style.display = 'block';\n\t}\n</script>\n</body>\n</html>We’ve added a button in our main content area. To show the popup we’ve added a JavaScript function to change the overlay and our popup to display:block; on event onclick. After making these changes click on your button to open your popup.
Demo:
\nSee the Pen OPmQMP by Zoie Carnegie (@zoie-loginradius) on CodePen.
\nPlease post your questions or feedback in the comment area.
\n","frontmatter":{"date":"January 05, 2015","updated_date":null,"title":"A Simple Popup Tutorial","tags":["HTML","CSS","UI"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/c6bf325c9c408389282535e3a446b575/58556/simplepop.webp","srcSet":"/static/c6bf325c9c408389282535e3a446b575/61e93/simplepop.webp 200w,\n/static/c6bf325c9c408389282535e3a446b575/1f5c5/simplepop.webp 400w,\n/static/c6bf325c9c408389282535e3a446b575/58556/simplepop.webp 800w,\n/static/c6bf325c9c408389282535e3a446b575/210c1/simplepop.webp 900w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Zoie Carnegie","github":null,"avatar":null}}}}]}},"pageContext":{"tag":"CSS"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}