Tag archives for CSS framework

JAVASCRIPT

javaScript / jQuery – Techniques of add, remove, toggle and change classes of an Element

After updating HTML to modern HTML5 and java-script to ECMAScript 6, we can say that web industry is now turning as a Self Dependent Platform. Flash and Java applets has been finished and older versions of IE and their troubles which always sucks have been completely vanished and now rememberes as…
Continue Reading
CSS - Cascading Style Sheets

Show Logo as pre-loader while web-page is loading

Today. we will create an animated pre-loader Logo image while loading it's web-page content. It will fade-out after loading all the web-page content. It will be helpful when, web pages takes time to load and sometimes when page is too heavy (full of images/video). Nowadays, sometimes we use too much…
Continue Reading
CSS - Cascading Style Sheets

Toggle the Visibility of Password Field with Eye Icon

Nowadays, in FORM (login, register) we can see a password field with Eye icon. It allows the visitor to toggle the password input field text visibility by clicking the toggle Eye icon. Sometimes, we may require to hide/show password input field so, user can see what he written in password…
Continue Reading
CSS - Cascading Style Sheets

How to Add Multiple Locations on Embed Google Maps

Nowadays, it's a trend to show office locations in contact page. For this, front-end developers always embed Google map API. Sometimes, its required to show multiple office locations in same google map. In most cases, frontend developer always stuck at this requirement. But, It’s very easy! Thanks to google API.…
Continue Reading
CSS - Cascading Style Sheets

Disable mouse scroll / wheel Zoom on embedded iframe Google Maps

Web Designer / Developer usually embed Google Maps using iFrame in most websites. But, page scrolling stuck when user use mouse scroll in Google map area, and now it is working as Map zoom in/out. So, we always wonder that, "is there a way to disable the zoom via mouse scroll…
Continue Reading
CSS - Cascading Style Sheets

Create a flashing button with CSS3 @keyframes Animation

Often, we need a promotional or highlight button like "Hot Offers/Deals/Promotional Discounts" with flashing effects. Today, we will create a beautiful flashing button without any GIF image using Pure CSS3. Before this, I am going to remind the basic ruls of CSS3 Animation first. CSS3 animations allows animation of most HTML…
Continue Reading
JAVASCRIPT

10 Useful Beginners JavaScript / jQuery tips and tricks

I consider myself as a advanced when it comes to coding in JavaScript or jQuery however recently I played a bit more with this language and stumbled upon a number of random things i assumed were worth sharing. As you know, JavaScript is the best programming language in the world, the language…
Continue Reading
CSS - Cascading Style Sheets

Add style to console log statements

Searching for errors in programming code is called code debugging. Debugging is not easy. But fortunately, all modern browsers have a built-in debugger. Built-in debuggers can be turned on and off, forcing errors to be reported to the user. With a debugger, you can also set breakpoints (places where code execution can…
Continue Reading
CSS - Cascading Style Sheets

CSS3 background gradient animation in a progress bar like in Windows 7

You can create a responsive, animated progress bars like in Windows 7 using pure CSS3. I haven't used any image in this tutorial. Resize your browser window to see the responsiveness. HTML <div class="bar"> <div class="blue loader"> <h3>;/h3> <span class="inner"> </span> </div> </div> CSS Next, we’ll create the background for…
Continue Reading