CSS3 animation is a great new feature of CSS3. With this feature, it is possible to animate transitions from one CSS style to another. The introduction of CSS keyframes rule made it possible to have intermediate waypoints along the way of animation.
Compiling all of the useful CSS animations in one CSS library is a great idea but may take some time. Good thing there is already a prebuilt library that compiles all good CSS animations.
Introducing Animate.css, a free prebuilt CSS library, created by Dan Eden. It is consist of over 50 amazing, cross-browser CSS animations that save you from writing a little more lines of CSS to animate elements on your site projects.
Today, we’re going to check how we can apply cool animations using this Animate.css tutorial. You can feature this animation in a landing page. Let’s get started!Read More
A website that is not yet ready to be launched needs a “Coming Soon” Page to notify the visitors that it would be soon launched on a specific time frame. As the modern web development evolved, this page is more than just a simple text page or an under construction image.
Designing the “Coming Soon” page increases the level of expectation of the visitors, thus, giving them the thrill of what will be soon published on the site. Aside from the design, you can also collect information of interested users by inserting a “Notify Me” textbox and a “Subscription Button” on the page.Read More
Over the years of WordPress development, the default login screen design hasn’t changed and remains simple and clean that works on different screen sizes. However, when building websites for specific clients, especially for companies, it would look nice if you can change the color scheme of the login screen as well as the logo to match with the site’s theme, right?
Good thing, it can be done easily. The great thing about WordPress is that each part of the backend can be customized by just using the PHP functions.
In today’s tutorial, I am going to show you how to customize WordPress login screen the way you want it. First, we will change the logo and then the color scheme and the some other elements. Let’s get started.Read More
Resume websites a.k.a Curriculum vitae (CV) websites have been on the Internet over the years. The trend dictates that more and more people are into responsive CV websites.
These kinds of website provide information that makes it easy for employers to evaluate that particular person’s skills. This has a lot of advantages as you do not need to submit a paper version of your CV because it can already be accessed online anytime and anywhere.
Its purpose is to provide an overview of of the following:
- Basic information
On today’s tutorial, we’re going to build a responsive CV website using CSS and a jQuery plugin called Easy Tabs Plugin, a lightweight jQuery plugin to provide full tab functionality.Read More
Web typography has become even more popular on the Internet in recent years. In the past, this was ignored, but with the different screens nowadays, this is an essential topic that should be dealt with. These days, with the options to use Web fonts like Google Fonts and Typekit, you can achieve cross-browser, stunning and high resolution web texts without worrying the screen sizes.
However, with all these available technologies, there’s a key ingredient missing for typographers: Kerning.
Kerning is the process of adjusting the spacing between characters in a proportional font. Thanks to the power of CSS3 and jQuery, it’s now possible to structure a well-designed typography with complete control of the text and animation quickly and easily.
Today, I’ll show you how to create stunning typography designs with CSS3 and a jQuery plugin called Lettering.js, a simple, lightweight, and easy-to-use jQuery plugin that gives complete control on web typography.Read More
High density retina displays or screens, like Apple’s Retina Display, have lots of pixels in a small space that it is almost impossible see the pixelation, thus, displaying smoother images and texts. Although Apple offered it first on the market, manufacturers have been releasing similar devices recently to compete with Apple.
When using Retina Display devices, you can see that other sites online appear blurry. This is because of the low-resolution images being stretched to fill the screen that makes the site look disgusting. A Retina Display scales 1px to 2px, making the size double.Read More
As smart phones and tablets have become popular, more and more people are have been reading their emails regularly on their small screen devices. According to Campaign Monitor, mobile surpassed web and desktop client usage last July 2012. As the mobile email usage grows, web developers and designer must consider optimizing the look of their email newsletters on phones and tablet.
Email clients such as Outlook (Windows), Mail (OSX), etc. use different HTML engines. Many have some rules and regulations. That being said, some CSS might work while some might not.
So, in making an email template, it is highly recommended to use a different approach. Many email clients completely remove the head and strip out styles while some support a limited set of inline and internal styles for formatting. To many, an old-school table layout is the best way to go.Read More
When web designer creates pages, sometimes they want to set an element where they need to bend or wrap texts inside a circle (e.g. for the site’s logo or title). Photoshop and some image editing software is often the go-to software for creating these images.
On the other hand, bending and setting text on a circle without using Photoshop gives flexibility to the design and value to the SEO since search engines can’t read texts in images.
This can be an easy task using Adobe Photoshop and Illustrator but setting text on web type using HTML and CSS might be a challenge. Thanks to the power of CSS3 and jQuery, this can be done.Read More
Now that we’re done talking about SASS let’s now talk about learning LESS. If you haven’t seen my SASS tutorial, I recommend you check it. In our previous tutorial, we listed down the drawbacks of CSS and how pre-processed methods can improve your workflow. We also talked about how to implement SASS using variables, nested, mixins, functions and so on. So we’re ready to take another learning curve with another pre-process method which is LESS.
LESS in a Nutshell
LESS is a dynamic style sheet language that extends CSS and, just like SASS, it has dynamic behavior such as variables, mixins, operations and functions.
It allows you to write CSS in a simpler way by just using and combining mixins, functions, and so on. LESS also increases readability and organization of CSS using imports, nested rules and comments with .less extension.Read More