15 Useful CSS Tricks You Might Have Overlooked

If you have been a frontend web developer for a while, there is a high chance that you have had a moment when you were trying to find out how to code something and realised after a bit of googling, that "there is CSS for that". If you hadn’t, well you are about to.

This post is a collection of such CSS codes, that can give you features like turn an element sticky, give you dashed line underlining capabilities, flow the text of your page in a special shape, or achieve parallax effect. Some of them are widely supported while others are on their way for full support by all browsers.

1. Numbering headings and subheadings

Say you got a set of headings and subheadings in your document and you are numbering them manually or via a script. Instead, you can use CSS counters to do this. There is already an in-depth post on it here. And since it is from a CSS2 spec, you can bet that it is supported by all browsers, except perhaps IE 6.

2. Spice Up Plain Underlines

Sometimes we want to underline with a nice dotted or dashed line instead of a solid one. Since there is no option for that, we settle for border-bottom. But border-bottom is not a good solution if the text you are underlining wraps.

CSS3 specified not one but three new properties for text decoration text-decoration-color, text-decoration-line, and text-decoration-style which can be shorthanded into the good old text-decoration.

You can use those to style underline, overline, even make text blink, and more. As of April 2015 only Firefox supports this property, but you can enable "experimental web platform features" to use it on Chrome.

3. Quoting A Quote

First of all, there is no need to bother with typing the correct curly quotes for short quotations because there is HTML for that: the <q> tag that indicates inline quotations.

The <q> tag also takes care of quoting the inner quotes with single quotes. So, where is the "there is ‘CSS’ for that" moment in this?

Lets say you don’t want the default double quotes or you have more than one level of nested quotes, you can define your quote preferences for the quote element with CSS by using the CSS2 quotes property.

4. Managing Unruly Tables

You may have come across a big table with varying content size per cell which refuses to remain within a width you have specified, no matter what you try. Tame that table with the table-layout property (for equal column height, follow this link).

To be specific, the fix is in the table-layout: fixed; value. When you assign a fixed layout for the table, the table and the cell width are determined by the width of the table or of the first row of cells (which can be defined by the user) and not by the content. This is supported by all browsers.

5. Make It Sticky

Sticky elements are elements on a page that will not be scrolled out of view. In other words it sticks to a visible area (viewport or scrolling box). You can create this with CSS using position: sticky;.

They act like relatively postioned elements before any scrolling and later like fixed elements once a scrolling threshold is reached. For now, only Firefox supports it.

6. Get Your Text In Shape

Do you want the text on your page to nicely curve over some image you displayed beside it? You can try CSS Shapes. To implement CSS shapes, we can make use of three properties shape-outside, shape-margin and shape-image-threshold. As of April, 2015 CSS Shapes is supported by webkit browsers.

7. Mandatory Fields

If you got a form there is a high chance that some fields in it are required while others aren’t. You will need to let the users know which is which. The CSS for this is :required :optional pseudo classes. All modern browsers support them.

8. Picky With Colors

If you don’t like a certain color, like blue, we can color the selected area with some other color and the ::selection pseudo element is the CSS for that. This is supported by all modern browsers.

9. Did I Check It?

In a situation where a checkbox has been checked, it would be nice to have another indication apart form the tiny checkmark inside the default checkbox to denote that the item has been checked.

There is CSS for that which exploits the bond between the immediate siblings, two elements side by side. CSS has adjacent sibling selector denoted by the plus + sign,and we can use it to to target the label beside the checkbox. But what about targetting the checked checkbox first? There is the :checked pseudo class for that.

10. Like A Storybook

Then, wouldn’t it be nice if the first "O" in the "Once upon a time" looks pretty? We can make it look pretty, after all there is CSS for that. Here is where ::first-letter pseudo element comes to the rescue. It targets the first letter of the first line of the targeted element. Read more about it here.

11. Would You Like To Know More?

An element may have class X or data Y or some other value to an attribute. If we ever need to display such an attribute value of an element near it, we can use the content:attr(X). It retrieves the value of attribute X of the element, then we can show it beside the element.

12. A Little Bit More To The Left

Centering elements for CSS beginners is quite a feat. Different elements require different set of CSS properties to center them. We will look into one example out of many that is available in the world wide web, so that you can remember again that there is CSS to center things.

13. Disclose File Format Of Links

Ever seen a small image near a link indicating what that link is? A PDF? or a DOC? Yes, there is CSS to achieve that. The content:url() is what we will use to display the image behind the links.

14. Trigger Parallax Effect

The parallax effect is an effect used to describe the seemingly slow movement of background relative to the foreground. This effect is popular in websites which implement parallax scrolling. There are different ways to implement it, the example below works in Firefox with background-attachment: fixed;.

15. The Power Of CSS Animations

Probably not a huge "there is CSS for that" moment, because you all are most probably aware of CSS animations by now. But a little reminder is of no harm. There are many uses for CSS animations but here is one for a simple coloring exercise.

Now Read:
50 Useful CSS Snippets Every Designer Should Have

Editor’s note: This is written for Hongkiat.com by Preethi R. Preethi is a .NET Web developer with a Java past and a bias for Firefox, Windows & DC Comic movies.

15 Useful CSS Tricks You Might Have Overlooked

15 Useful CSS Tricks You Might Have Overlooked

If you have been a frontend web developer for a while, there is a high chance that you have had a moment when you were trying to find out how to code something and realised after a bit of googling, that "there is CSS for that". If you hadn’t, well you are about to.

This post is a collection of such CSS codes, that can give you features like turn an element sticky, give you dashed line underlining capabilities, flow the text of your page in a special shape, or achieve parallax effect. Some of them are widely supported while others are on their way for full support by all browsers.

1. Numbering headings and subheadings

Say you got a set of headings and subheadings in your document and you are numbering them manually or via a script. Instead, you can use CSS counters to do this. There is already an in-depth post on it here. And since it is from a CSS2 spec, you can bet that it is supported by all browsers, except perhaps IE 6.

2. Spice Up Plain Underlines

Sometimes we want to underline with a nice dotted or dashed line instead of a solid one. Since there is no option for that, we settle for border-bottom. But border-bottom is not a good solution if the text you are underlining wraps.

CSS3 specified not one but three new properties for text decoration text-decoration-color, text-decoration-line, and text-decoration-style which can be shorthanded into the good old text-decoration.

You can use those to style underline, overline, even make text blink, and more. As of April 2015 only Firefox supports this property, but you can enable "experimental web platform features" to use it on Chrome.

3. Quoting A Quote

First of all, there is no need to bother with typing the correct curly quotes for short quotations because there is HTML for that: the <q> tag that indicates inline quotations.

The <q> tag also takes care of quoting the inner quotes with single quotes. So, where is the "there is ‘CSS’ for that" moment in this?

Lets say you don’t want the default double quotes or you have more than one level of nested quotes, you can define your quote preferences for the quote element with CSS by using the CSS2 quotes property.

4. Managing Unruly Tables

You may have come across a big table with varying content size per cell which refuses to remain within a width you have specified, no matter what you try. Tame that table with the table-layout property (for equal column height, follow this link).

To be specific, the fix is in the table-layout: fixed; value. When you assign a fixed layout for the table, the table and the cell width are determined by the width of the table or of the first row of cells (which can be defined by the user) and not by the content. This is supported by all browsers.

5. Make It Sticky

Sticky elements are elements on a page that will not be scrolled out of view. In other words it sticks to a visible area (viewport or scrolling box). You can create this with CSS using position: sticky;.

They act like relatively postioned elements before any scrolling and later like fixed elements once a scrolling threshold is reached. For now, only Firefox supports it.

6. Get Your Text In Shape

Do you want the text on your page to nicely curve over some image you displayed beside it? You can try CSS Shapes. To implement CSS shapes, we can make use of three properties shape-outside, shape-margin and shape-image-threshold. As of April, 2015 CSS Shapes is supported by webkit browsers.

7. Mandatory Fields

If you got a form there is a high chance that some fields in it are required while others aren’t. You will need to let the users know which is which. The CSS for this is :required :optional pseudo classes. All modern browsers support them.

8. Picky With Colors

If you don’t like a certain color, like blue, we can color the selected area with some other color and the ::selection pseudo element is the CSS for that. This is supported by all modern browsers.

9. Did I Check It?

In a situation where a checkbox has been checked, it would be nice to have another indication apart form the tiny checkmark inside the default checkbox to denote that the item has been checked.

There is CSS for that which exploits the bond between the immediate siblings, two elements side by side. CSS has adjacent sibling selector denoted by the plus + sign,and we can use it to to target the label beside the checkbox. But what about targetting the checked checkbox first? There is the :checked pseudo class for that.

10. Like A Storybook

Then, wouldn’t it be nice if the first "O" in the "Once upon a time" looks pretty? We can make it look pretty, after all there is CSS for that. Here is where ::first-letter pseudo element comes to the rescue. It targets the first letter of the first line of the targeted element. Read more about it here.

11. Would You Like To Know More?

An element may have class X or data Y or some other value to an attribute. If we ever need to display such an attribute value of an element near it, we can use the content:attr(X). It retrieves the value of attribute X of the element, then we can show it beside the element.

12. A Little Bit More To The Left

Centering elements for CSS beginners is quite a feat. Different elements require different set of CSS properties to center them. We will look into one example out of many that is available in the world wide web, so that you can remember again that there is CSS to center things.

13. Disclose File Format Of Links

Ever seen a small image near a link indicating what that link is? A PDF? or a DOC? Yes, there is CSS to achieve that. The content:url() is what we will use to display the image behind the links.

14. Trigger Parallax Effect

The parallax effect is an effect used to describe the seemingly slow movement of background relative to the foreground. This effect is popular in websites which implement parallax scrolling. There are different ways to implement it, the example below works in Firefox with background-attachment: fixed;.

15. The Power Of CSS Animations

Probably not a huge "there is CSS for that" moment, because you all are most probably aware of CSS animations by now. But a little reminder is of no harm. There are many uses for CSS animations but here is one for a simple coloring exercise.

Now Read:
50 Useful CSS Snippets Every Designer Should Have

Editor’s note: This is written for Hongkiat.com by Preethi R. Preethi is a .NET Web developer with a Java past and a bias for Firefox, Windows & DC Comic movies.

15 Useful CSS Tricks You Might Have Overlooked

15 Useful CSS Tricks You Might Have Overlooked

If you have been a frontend web developer for a while, there is a high chance that you have had a moment when you were trying to find out how to code something and realised after a bit of googling, that "there is CSS for that". If you hadn’t, well you are about to.

This post is a collection of such CSS codes, that can give you features like turn an element sticky, give you dashed line underlining capabilities, flow the text of your page in a special shape, or achieve parallax effect. Some of them are widely supported while others are on their way for full support by all browsers.

1. Numbering headings and subheadings

Say you got a set of headings and subheadings in your document and you are numbering them manually or via a script. Instead, you can use CSS counters to do this. There is already an in-depth post on it here. And since it is from a CSS2 spec, you can bet that it is supported by all browsers, except perhaps IE 6.

2. Spice Up Plain Underlines

Sometimes we want to underline with a nice dotted or dashed line instead of a solid one. Since there is no option for that, we settle for border-bottom. But border-bottom is not a good solution if the text you are underlining wraps.

CSS3 specified not one but three new properties for text decoration text-decoration-color, text-decoration-line, and text-decoration-style which can be shorthanded into the good old text-decoration.

You can use those to style underline, overline, even make text blink, and more. As of April 2015 only Firefox supports this property, but you can enable "experimental web platform features" to use it on Chrome.

3. Quoting A Quote

First of all, there is no need to bother with typing the correct curly quotes for short quotations because there is HTML for that: the <q> tag that indicates inline quotations.

The <q> tag also takes care of quoting the inner quotes with single quotes. So, where is the "there is ‘CSS’ for that" moment in this?

Lets say you don’t want the default double quotes or you have more than one level of nested quotes, you can define your quote preferences for the quote element with CSS by using the CSS2 quotes property.

4. Managing Unruly Tables

You may have come across a big table with varying content size per cell which refuses to remain within a width you have specified, no matter what you try. Tame that table with the table-layout property (for equal column height, follow this link).

To be specific, the fix is in the table-layout: fixed; value. When you assign a fixed layout for the table, the table and the cell width are determined by the width of the table or of the first row of cells (which can be defined by the user) and not by the content. This is supported by all browsers.

5. Make It Sticky

Sticky elements are elements on a page that will not be scrolled out of view. In other words it sticks to a visible area (viewport or scrolling box). You can create this with CSS using position: sticky;.

They act like relatively postioned elements before any scrolling and later like fixed elements once a scrolling threshold is reached. For now, only Firefox supports it.

6. Get Your Text In Shape

Do you want the text on your page to nicely curve over some image you displayed beside it? You can try CSS Shapes. To implement CSS shapes, we can make use of three properties shape-outside, shape-margin and shape-image-threshold. As of April, 2015 CSS Shapes is supported by webkit browsers.

7. Mandatory Fields

If you got a form there is a high chance that some fields in it are required while others aren’t. You will need to let the users know which is which. The CSS for this is :required :optional pseudo classes. All modern browsers support them.

8. Picky With Colors

If you don’t like a certain color, like blue, we can color the selected area with some other color and the ::selection pseudo element is the CSS for that. This is supported by all modern browsers.

9. Did I Check It?

In a situation where a checkbox has been checked, it would be nice to have another indication apart form the tiny checkmark inside the default checkbox to denote that the item has been checked.

There is CSS for that which exploits the bond between the immediate siblings, two elements side by side. CSS has adjacent sibling selector denoted by the plus + sign,and we can use it to to target the label beside the checkbox. But what about targetting the checked checkbox first? There is the :checked pseudo class for that.

10. Like A Storybook

Then, wouldn’t it be nice if the first "O" in the "Once upon a time" looks pretty? We can make it look pretty, after all there is CSS for that. Here is where ::first-letter pseudo element comes to the rescue. It targets the first letter of the first line of the targeted element. Read more about it here.

11. Would You Like To Know More?

An element may have class X or data Y or some other value to an attribute. If we ever need to display such an attribute value of an element near it, we can use the content:attr(X). It retrieves the value of attribute X of the element, then we can show it beside the element.

12. A Little Bit More To The Left

Centering elements for CSS beginners is quite a feat. Different elements require different set of CSS properties to center them. We will look into one example out of many that is available in the world wide web, so that you can remember again that there is CSS to center things.

13. Disclose File Format Of Links

Ever seen a small image near a link indicating what that link is? A PDF? or a DOC? Yes, there is CSS to achieve that. The content:url() is what we will use to display the image behind the links.

14. Trigger Parallax Effect

The parallax effect is an effect used to describe the seemingly slow movement of background relative to the foreground. This effect is popular in websites which implement parallax scrolling. There are different ways to implement it, the example below works in Firefox with background-attachment: fixed;.

15. The Power Of CSS Animations

Probably not a huge "there is CSS for that" moment, because you all are most probably aware of CSS animations by now. But a little reminder is of no harm. There are many uses for CSS animations but here is one for a simple coloring exercise.

Now Read:
50 Useful CSS Snippets Every Designer Should Have

Editor’s note: This is written for Hongkiat.com by Preethi R. Preethi is a .NET Web developer with a Java past and a bias for Firefox, Windows & DC Comic movies.

15 Useful CSS Tricks You Might Have Overlooked

20 Signs You Might Be a Designer

Ever lingered too long in a supermarket aisle, silently wondering who could go cuckoo for the Cocoa Puffs typography or marveling over the packaging of some exotic tea blend? Follow the latest design trends more closely than the daily news? Make intentional design choices when creating simple documents and presentations? It’s quite possible that you are a graphic designer.

Like most creative people, designers are known for being quirky and, well…creative. They also possess curiosity, instinct, an eye for detail and great problem-solving abilities. Designers are not merely critical of design, but they often have great ideas on how to improve existing works.

See how many of these 20 designer traits and habits you identify with to determine whether a career in design is your destiny. A designer will:

1. Watch movies just for the opening titles

When movie night comes around, designers will sit through comedy, horror, action, romance or science fiction — as long as there’s a great opening sequence and stunning art direction.

2. Create redesigns of movie posters

Whether it’s a minimalist take on an epic film or a loving recreation of a beloved movie, poster design is a great warm-up project to get creative juices flowing.

3. Buy products based solely on packaging

Is it toothpaste? Is it soup? Who knows, but the label is exquisite!

4. Stare at billboards excessively

Frequently stop to look at billboards, signs and shop windows to admire — or critique — the design. The need to stare may have put your life in danger more than once.

5. Become agitated in the presence of bad design

6. Get disappointed when a fine dining establishment uses Zapf Chancery as the sole typeface in its menu

System fonts shouldn’t be used to sell surf ‘n’ turf.

7. Know that every typeface has a distinct personality

Helvetica is Type A, Gotham is an extrovert, and Comic Sans is an 8-year old girl writing a poem about unicorns.

8. Invest money in quality design materials

A great font family will outlast the best pair of shoes — and probably cost less, too.

9. Know that a brand can literally own a color

You’re familiar with the existence of “Coke Red”, also known as Pantone 484.

10. Never leave the house without a Moleskine sketchbook

Who knows when the muse will strike?

11. Compile folders and scrapbooks with design inspiration

From magazine spreads to vintage ticket stubs, from large concert posters to the smallest clothing label, everything has a design and serves as a potential reference for future projects.

12. Keep a wish list with several items from the Pantone Universe collection

Designers not only have a favorite color, but they also know how to achieve it in RGB, CMYK, hexadecimal HTML color codes and Pantone Process (coated and uncoated).

13. Save a collection of design templates, fonts and tutorial files on a dedicated hard drive

And possibly also pay for cloud storage. You just can’t risk losing your collection. Not that.

14. Take delight in blowing people’s minds by pointing out hidden design elements in corporate logos

Many brands have clever imagery incorporated into their logos— from FedEx with the white-space arrow to Baskin Robbins’s nod to their original 31 flavors.

15. Think that a brand redesign is juicier news than a celebrity scandal

16. Love vibrant colors and patterns but prefer to keep living/work spaces in a neutral color palette.

17. See form over content

Before delving into a book or a magazine article, a designer will first analyze content flow, type choice and accompanying graphics.

18. Possess the ability to view the world differently from everyone else

Designers are sensitive to details that elude most people.

19. Develop a strong design identity

After building a substantial library of fonts, stock images and grid templates, designers eventually settle into their own styles that rely on a smaller stable of preferred typefaces and color palettes.

20. Spend hours browsing content by talented creators on Creative Market

---

Now that you’ve identified yourself as an emerging designer, start getting involved in the design community, both online and locally. Want to branch out beyond business cards and invitations for family and friends? Build your design resume through volunteering. Charitable organizations are always engaged in fundraising events that need great poster designs. Create new digital wallpaper for smartphones and computers, and offer them as freebies online. Someday, someone will linger over your designs in the supermarket.

---

Products Seen In This Post:

Share on PinterestShare on Pinterest

---

20 Signs You Might Be a Designer

10 Useful WordPress Functions You Might Not Know About

WordPress is full of great functions for us developers to use. We can pull post lists out of thin air, manipulate almost everything about them, grab any user we wish and display their social media connections in a jiffy.

There are however quite a few functions which seem to be overlooked for unknown reasons. I’ve been coding with WordPress for around 8 years now and occasionally I still find something new! Let’s take a look at some of my favourite overlooked functions and learn how to use them along the way.

Recommended Reading: WordPress Conditional Tags (And Snippets) For Beginners

antispambot()

I usually raise a few eyebrows with this one, it seems to be one of the most well-hidden functions in the codebase. <code>antispambot()</code> replaces characters with HTML entities which is one way to mask email addresses from evil scrapers.

$email = "mymail@mail.com";
echo "You can contact me at " . antispambot( $email ) . " any time".

While this is a useful tidbit, it is also an example of why some people criticise WordPress – this is a horribly named function. From reading the function name, you have no idea what it does.

human_time_diff()

When I first learned about this function about a year ago I thought it must have been a recent addition which I overlooked in a changelog. Not quite…

This function – which outputs the difference between two timestamps – has been in since version 1.5 (that’s February 17, 2005!).

The following great snippet I borrowed from the codex shows how long ago a current post was published. It uses the publish date of the post as the first argument and the current date as the second.

echo "This post was published " . human_time_diff( get_the_time( "U" ), current_time( "timestamp" ) ) . " ago";

get_post_meta()

Bear with me here, I know this is a well-used function, however, how it works is not-so-common knowledge. First of all, by omitting the second and third parameters you can pull all metadata for a post.

$all_meta = get_post_meta( 14 );

Even if you only grab the data for a single key all postmeta is pulled anyway.

The reason is actually pretty logical. Metadata is used in multiple places. If <code>get_post_meta()</code> queries the database each time it was used we would end up with way too many queries. Instead, if you pull metadata it caches it all and uses the cached values on all subsequent metadata retrievals.

wp_upload_bits()

This function is a straight-up file uploading function. While it doesn’t move the file to the uploads folder and add it to the WordPress media section, it is extremely convenient and you can always to the rest with the <code>wp_insert_attachment()</code> function.

$upload = wp_upload_bits( $file["name"], null, file_get_contents( $file["tmp_name"] ) );

Some explanation is at hand for this: the first parameter is the file name. The second is depreciated so it should be set to null (eyeroll at WordPress consistency). The third parameter is the actual content of the file.

get_post_field()

In the past I saw quite a few examples where someone wrote a loop to get a comment count for a post, or wrote a dedicated database query for it. You don’t need them, what you need is <code>get_post_field()</code> . This function retrieves the value of a single field for a single post in the database. Let’s grab a comment count!

This post has <?php echo get_post_field( "comment_count", 4124 ) ?> comments.

wpautop()

This function has come out into the spotlight a bit, but it is still relatively unknown. It is similar to the PHP native nl2br but instead of creating new lines, it wraps your content in paragraphs.

This is useful if you have a textbox and you want to make sure that when users create paragraphs with double line breaks, they remain visible in the front-end as well.

<h2>What Our Users Say</h2>
<?php echo wpautop( $user_comment ) ?>

wp_is_mobile()

This aptly named function detects when a user is on a mobile device and allows you to display content accordingly. Since this is a conditional tag it returns true or false depending on the scenario.

<?php if( wp_is_mobile() ) : ?>
Visit our website on your desktop for a richer user experience
<?php endif ?>

DOING_AJAX

While this is a constant, not a function (sorry), it is useful nonetheless. You can discern between AJAX calls and regular stuff by checking if it is defined and is true. This can be useful if you are using a common function for a task that is sometimes triggered by AJAX.

if (defined("DOING_AJAX") && DOING_AJAX) 
 echo "done";
 die()

else  

wp_redirect()

The last example shows another neat function: <code>wp_redirect()</code>. This should be used in place of the PHP native <code>header()</code> function. The WordPress redirection function allows you to set a URL to redirect to, and also set a status code, great for handling permanent redirects as well.

// For a URL which is no longer in use
wp_redirect( "http://website.com/new-url/", 301 );

paginate_links()

I bet that this function owes its obscurity in part to the popularity of the WP-PageNavi plugin. By default WordPress displays previous/next links at the end of your post list. WP-PageNavi replaces that with page numbers.

This can actually be done with a little work using the <code>paginate_links()</code> functions. It has quite a few parameters so I recommend taking a peek at the documentation.

The following example from the codex shows how you can add it to a default loop but adding it to custom loops is not much of a stretch.

global $wp_query;
$big = 999999999; // need an unlikely integer
echo paginate_links( array(
 "base" => str_replace( $big, "%#%", esc_url( get_pagenum_link( $big ) ) ),
 "format" => "?paged=%#%",
 "current" => max( 1, get_query_var("paged") ),
 "total" => $wp_query->max_num_pages
) );

Conclusion

These are just some functions that seem to be less-known that the rest. I discover a new great function about every two months and I’m sure my developer friends out there could surprise us even further.

If you have a favorite obscure function or a function which would be useful but isn’t available, let us know in the comments!

No related posts.

10 Useful WordPress Functions You Might Not Know About