5 CSS Tricks Designers Should Know

Ever since its introduction to the world in 1996, CSS has been the staple of web page decoration and visual presentation. It has lasted until today, controlling aspects such as layout, typography, and colors of a web page or site. As a web designer, knowing key CSS tricks can help you enhance your work, producing web pages with a better look and feel, and making them more responsive and user-friendly.

If you’re a web designer, it’s up to you to create pages that leave a lasting impression. In this article, we’ll cover 5 CSS tricks designers as you should know. These techniques will help you create beautiful and responsive websites that will be sure to stand out from the crowd.

Essential CSS Tricks for Designers 

1. Grid Layout

Grid layout is a powerful tool that allows designers to easily create complex layouts. You can define rows and columns and then place elements within them. They are especially useful when dealing with many similar items that should be arranged spatially logically, such as a photo gallery.

To use the grid layout, you first define a container element as a grid with the display: grid property. You can then specify the size and placement of each row and column using the grid-template-rows and grid-template-columns* properties, respectively. Finally, you can place elements within the grid using the grid-column and grid-row properties.

Here’s a simple example of how to use a grid layout:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;

.item {
  grid-column: 1 / 3;
  grid-row: 2;

In this example, we’re using a grid to create a container with three columns and a 20px gap between them. We’re also placing an item within the second row and spanning it across two columns.

2. Flexbox

Flexbox is another powerful layout tool that allows designers to create responsive layouts with ease. With Flexbox, you can define a flexible container and then place items within that container.

To use Flexbox, you first define a container element as a flex container with the display: flex property. You can then specify how items should be distributed along the main and cross axes using properties like justify-content and align-items. You can also set the size of each item using the flex-basis property.

Here’s an example of how to use Flexbox:

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;

.item {
  flex-basis: 30%;

In this example, we’re using a flexbox to create a container with items that are spaced evenly and centered vertically.

3. Transitions and Animations

Both transitions and animations are great tools for adding interactivity and visual interest to your website. With transitions, you can specify how properties should change over time, while animations allow you to create animated content with the help of keyframes.

To use transitions, you first define an element’s starting and ending states using properties. You can then use the transition property to specify which properties should transition and how long the transition should take. When the element’s state changes (for example, when the user hovers over it), the transition will occur.

Here’s an example of how to use transitions to create a hover effect on a button:

.button {
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.5s ease;

.button:hover {
  background-color: #fff;
  color: #333;

In this example, the background-color property of the button is set to transition over 0.5 seconds with an ease of timing function. When the user hovers over the button, the background-color changes to white, creating a simple but effective hover effect.

4. Custom Fonts

Custom fonts allow designers to create unique and memorable typography for their websites. Using custom fonts, designers can set their websites apart from the competition and create a more consistent and immersive experience.

To use custom fonts, you’ll first need to find a font you like and download it. You can then upload the font files to your website and use CSS to apply the font to your text. You can either use the @font-face rule to define the font, or you can use a service like Google Fonts to host the font files and provide a simple way to add the font to your website.

Here’s an example of how to use custom fonts with the @font-face rule:

@font-face {
  font-family: ‘My Custom Font’;
  src: url(‘my-custom-font.woff2’) format(‘woff2’),
      url(‘my-custom-font.woff’) format(‘woff’);

h1 {
  font-family: ‘My Custom Font’, sans-serif;

In this example, we’re defining a custom font called “My Custom Font” using the @font-face rule. We’re then applying that font to an h1 element using the font-family property.

5. Variables

Variables, also known as custom properties, allow designers to define reusable values that can be used throughout their CSS. This can make it easier to create consistent and modular styles and can also make it easier to update styles in the future.

To use variables in CSS, you first define them using the — prefix. You can then use that variable throughout your CSS by referencing it with the var() function. You can also update the value of the variable dynamically using JavaScript.

Here’s an example of how to use variables in CSS:

:root {
  –primary-color: #007bff;

button {
  background-color: var(–primary-color);
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;

button:hover {
  background-color: #fff;
  color: var(–primary-color);

In this example, we’re defining a primary-color variable and setting it to a blue tone. We’re then using that variable to set the background color of a button. When the user hovers over the button, the background-color changes to white, and the color changes to the primary color, which we set using the variable.

Empower Your CSS Skills

By using these 5 essential CSS tricks, you can create beautiful and responsive websites that stand out from the competition. They are all powerful tools that can help you take your designs to the next level.

Remember, these are just a few of the many CSS tricks that are available to web designers. A good designer should keep experimenting and learning new techniques to stay at the top of their game. Happy Web Designing!

Featured image by Christina Morillo on Pexels

The post 5 CSS Tricks Designers Should Know appeared first on noupe.

Media Query width and vertical scrollbars

Media queries are a great tool for changing a website’s layout depending on parameters like viewport width, but it can be very annoying when browsers do not do the same thing. An obvious example is whether or not a vertical scrollbar, should one exist, is included when the viewport’s width is calculated.

I made a note about this two years ago in Media queries, viewport width, scrollbars, and WebKit browsers. In that post I also pointed to the following statement in the Media Queries specification:

The ‘width’ media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport (as described by CSS2, section 9.1.1 [CSS21]) including the size of a rendered scroll bar (if any).

So it’s pretty clear what browsers are supposed to do. But in reality this varies. It doesn’t just depend on the browser and operating system but also on user settings. To find out what current browsers do, I created a simple Media Query width test document with a number of breakpoints and opened it in a lot of browsers.

I saw three different behaviours.

Read full post

Posted in , .

Copyright © Roger Johansson

Weekly News Roundup – 25 January 2013

The week is coming to an end and that means it is time for us to look back on the week that passed, the best design news, resources and other goodies. This week we look at Responsive Web Design, Twitter Bootstrap, what comes first the idea or the design, as well as taking a trip down memory lane with the history of Apple.com

Creative Techniques for Single-Page Websites

Over the past few years there has been an emergence of new custom trends in website design. A very popular idea is placing all your major content onto a single page and using dynamic scrolling animations to locate bits of content. These single-page layouts are popular among landing pages and mobile apps which only need to display a small section of related information. In this article I would like to go over some interesting techniques you’ll find in single page websites.


Quick Prototyping: Collection of Free HTML/CSS/JS UI Kits

The main idea of HTML/CSS/JS UI kits is to offer you a range of production-ready web elements with a consistent style, so that you quickly kick-start any new web project. Typically standard UI packs will include buttons of different sizes and types, form field elements, navigation & pagination systems, tabs, alerts and tags




21 Fresh Examples of Responsive Web Design

Responsive design is something a lot of designers talk about. And considering the importance of responsiveness and all the buzz around it, it’s impressive the amount of websites that are still not responsive. By now, with the amazing growth of mobile usage, every single website should be responsive to be able to attend to every user’s “screen size needs.�




Getting Started with Twitter Bootstrap

Building a website from the ground up is very hard. Even some people who are able to code in web languages like JavaScript, HTML and CSS would find difficulties in the process. Fortunately, a few Twitter developers and designers are aware of this situation and had launched a framework called Bootstrap to make life easier for web designers and developers.



Which Comes First: Web Site Design Or Content?

When you work on putting together your web site is it best to start with content or design? It’s a bit of a chicken or the egg conundrum. You really should not work on one entirely before the second. Here are two scenarios we’ve worked around and let me say, they are not ideal. 1. Working the design around a finished content document There have a been a couple of cases where a client hands me a finished Word doc to start a web site with and announces grandly: “I’ve got the content nearly finished for you.� On the one hand, it’s great that they’ve been thinking about the content of their web site.




7 Newly Released Frameworks for Developers

A framework is basically software application which assists developers to quickly design and develop dynamic websites. With the advent of HTML5 and CSS3, development becomes easy for everyone. Here at SkyTechGeek we conducted a search and collected 7 newly released frameworks which will assist our audience to design and develop beautiful cross browser dynamic websites, and applications.




Flat design vs. skeuomorphism

It seems that there has been a line drawn in the sand. A few brave design pioneers have all but denounced skeuomorphic design as yesterday’s news and have voted it off of the proverbial island. Are we witnessing the turning point of design as we know it, or are these champions simply jumping an imaginary bandwagon? Let’s take a closer look at the two biggest styles in 2013…





15 Years Of Apple Website History

After Tim Cook addressed The Wall Street Journal’s bad reporting on Apple’s cut on component orders for the iPhone 5, the quarterly numbers for 2013 were announced. As everyone expected, they were mind bogglingly good. As we have reported here on Bit Rebels before, Apple is in no way struggling to make profit off of their own ingenuity. But how is it that they continue their success year after year? Maybe the answer can be found in Apple’s website history.




20 Excellent jQuery Sliders for your Website

Making a website that is aesthetically pleasing is a process. It’s not generally going to happen overnight and it certainly won’t happen without a little intuition. It also requires the usage of a lot of different technologies to make the website look its very best.


30+ Creative and Inspiring Web Design Portfolio Websites

Many talented web designers like to show off their skills online and web design portfolio websites have become very popular. This is also a strong trend other creative niches and many graphic designers and photographers have creative portfolios as well.


The post Weekly News Roundup – 25 January 2013 appeared first on Design Reviver.

The mysterious WebKit placeholder overflow bug

A couple of projects I’ve been working on lately have triggered a frustrating overflow bug that took me ages to find the cause of. Sometimes a horizontal scrollbar would appear for no obvious reason.

I first noticed it in narrow mobile viewports when testing changing the orientation from landscape to portrait in the iOS Simulator, which made me think that it happened only in iOS WebKit. However when I made a minimal test case to try to isolate the problem it turned out that it happens in WebKit-based desktop browsers like Safari, Chrome, and iCab as well. I haven’t been able to reproduce it in any other browsers though.

After a lot of testing I found the culprit, and it was a quite unexpected one to me.

Read full post

Posted in , .

Copyright © Roger Johansson

iOS WebKit browsers and auto-zooming form controls

One thing about iOS browsers that can be pretty frustrating, both as a developer and as a user, is when you open a site on an iPhone or iPod Touch (not iPad) and want to enter some text in a text field or pick an option from a select menu. Very often the browser will automatically zoom in on the entire page a little when you tap the form control.

The intention is likely to be helpful and ensure that you can see the text you’re typing or the options in the select element. This is fine, of course. What’s annoying is that the browser doesn’t zoom back out once you’re done with the control, so you have to pinch the screen and manually zoom out. Not showstopping, but rather annoying. This behaviour seems to be the same for all browsers that use WebKit, which as far as I know means all iOS browsers except Opera Mini (which does not auto-zoom form controls).

For end users I don’t know if it is possible to avoid this, but for web developers there are a couple of ways.

Read full post

Posted in , .

Copyright © Roger Johansson

  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress