We are going to go back to basics and talking about margin and padding properties again, expanding on a previous post by Valentin Garcia.
When we start styling an HTML element with CSS, it is treated like a box by default. Border, margin, and padding are properties that affect the appearance of the box’s edges. Very simply, margin is the area on the outside of a box’s border and padding is the area on the inside of a border. The purpose, mostly, is to add space between elements for better design and readability.
The CSS border property does have some customization options, such as choices like solid, dashed, dotted, etc. However, when it comes to border color, we can only have a solid color per side. But, there is another way to achieve a multi-colored line using a few more properties you might not have thought of, let’s take a look.
In a previous article, you learned the basic concepts of CSS animations and how to use them. We could say that transitions are a simplified form of animation with some differences between them, the form of triggering the animation being the most relevant one.
Another difference is that transitions have only two states (initial and final state), whereas you can define multiple states for an animated element with the @keyframes rule. Transitions are triggered on an action, for example when hovering over an element, but animations can occur without a specific action, for example with an animation-delay after page load.
In this tutorial, we are going to learn the basic concepts of CSS Transitions with a practical example. Additionally, you will also learn how to use an image sprite with CSS.
CSS Animations give your site and/or brand a unique touch, provide more accessibility, help create affordance (the perception about how an element inside the design is to be used), and can provide the user with a better experience. All this happens when animations are designed and used the right way.
Subtle animations in a web site, point the user to certain tasks to be accomplished, like clicking a call-to-action link or filling out a form. Other animations, like a loading icon inside a button, make the user understand what they need to do, like wait while the next page loads.
This tutorial will explain the concept of animations with a simple example. Let’s start!
No matter what CMS you might be using, WordPress, Drupal, Joomla, Magento, etc., it's of benefit to learn some CSS to make sure you can carry your branding through your site. Buttons on websites are a bit more complex to style, but they really give the site a finished and polished look when you customize them to fit your look and feel.
The <button> tag describes a clickable surface, which triggers an action, a JS method or event when clicking on it. Buttons provide interactivity in your site, that is why they should always be associated with a script (that is not always the case, as we will see later).
You are allowed to embed text and images into a <button> element, in contrast to the <input type=”button”> element. Buttons can be embedded in all HTML content categories, including <form> elements.
A few years ago, setting up an SSL certificate was a slow and costly painful process.
At one point, we were paying over $500 per year for a top-of-the-line SSL certificate on this site. Plus, many platforms had poor support for SSLs.
All that has changed. You can get free SSL certificates now, and web software almost always has great support for your SSLs.
The tricky part of using an SSL certificate is now making sure you aren't loading images or files over http. This will cause your SSL certificate to show an error. Here's the code we used in our .htaccess to push all our site's assets to https.
Icons on a website are handy. They provide easy visual information, providing links to email forms, telephone numbers, maps and more.
Traditionally these icons have been graphics created using a graphic design programme such as Illustrator or Photoshop or downloaded from the many free graphics sites.
In this tutorial, you will learn how to create icons using just CSS and fonts. This will allow you to edit all your graphics with just a few lines of code. By using font-based graphics you also make your pages lighter and more responsive.
Much of jQuery's popularity is due to the fact that it considerably reduces development time. Their slogan is "write less, do more", which is a great summary of jQuery's benefits.
In this tutorial, you will learn how to create your own custom jQuery plugin in 4 easy steps.
They use it to build their PHP projects and manage all the external libraries and dependencies. They love it so much they say things like this: "Composer should be the only way to build a Drupal code base."
That approach is misguided, and I'm going to give you 5 reasons why.
Composer is a great tool, but it's far more limited than some people realize.
I'm going to mostly write about Drupal in this blog post, because it is further down the Composer path than any other CMS. But, some platforms like Magento and Typo3 are headed that way too.
For those of you, who like me have been developing websites for few years, we tend to use similar chunks of CSS code that we copy paste from project to project.
Those of you who are more organized may have developed your own set of base CSS files to use as foundation for your projects. This method works, but let’s face it, this is not the most efficient way to do things.
This tutorial will show you an easy way to submit your sitemap to multiple search engines.
It's a bit of an obscure method, although it's well documented. We'll edit the robots.txt file to insert one line of code. And that's it. An account isn't needed and it's supported by Google, Bing, Yahoo, and Ask.
Currently, the filter property offers 10 style variations, but we're going to focus on the three most widely used elements: grayscale, blur, and opacity.
Three years later, and its obvious that even those optimistic projections underestimated just how popular Bootstrap would become. Not only has Bootstrap grown since 2013. According to a range of statistics, its usage has actually grown by between 800% to 1,000%
I'm frustrated with modern web design. And I'm certainly frustrated with most theme and template designers who sell their work without checking for global accessibility.
Many designers actually take good, accessible CMSs and then create designs with big accessibility problems.
I'm a lawyer, website designer and accessibility / diversity consultant in Australia. Having advised the corporate, government and education sectors, I find a lot of sites are not accessible and offer many users a bad experience.
We use Wistia to host all our videos and provide a great viewing experience for our users.
The Wistia platform offers many useful features out-of-the-box, including the design of the player, video controls, social sharing, timeline actions, and more. If you login to your Wistia account, you'll be able to customize all these features using their friendly admin panel.
However, Wistia also has an API that allows you to add your own customizations. From a developer perspective, I want to show you how to take advantage the Wistia API to adding extra features to their video player.
In previous tutorials, we've explained that it can be dangerous to used HTML widths for your layout.
Fortunately, CSS is powerful enough to mimic any old-fashioned HTML. For example, you can easily create columns in CSS using the column-count property. This can be very useful for whole site layouts, but also to split long texts into columns.
In this short tutorial, I'll show you how to create columns using column-count.