Posts Tagged: CSS


Displaying an External Link Icon Using CSS

Letting your visitors know that a link leads away from the site they’re currently on can be a great practice to adopt. If you want to display a small icon at the end of every external link on your website, without having to add a class like “external” to your a hrefs, there’s another option

Changing the Viewport Height When Link-Jumping

When clicking on a #link that jumps to a particular part of a page, sometimes we need to take into account the viewport. If we have a fixed header, say 80px in height, our content will be overlapped by the header. To fix this, we can use some CSS magic: .jump_link:before { height: 80px; /*

Counting with CSS using CSS Counters

body { counter-reset: count; } li a:before { counter-increment: count; content: counter(count) “. “; font-weight: bold; } I needed to use something like this to count the <LI>s within an unordered list <UL> for a table of contents generated using jQuery. It’s simple, so there’s not too much to explain about it. It’s super handy

Optimal Line-Height for Your CSS

body { font: 100%/1.618 sans-serif; } While this won’t exactly cover the golden ratio for line height when it comes to your content’s width, this will at least help get you there with a starting CSS solution.

“Fixing” CSS of iOS Buttons

When you’re designing a responsive theme, the buttons while browsing on an iOS device will take on their own consistent design. This tends to force your own buttons to take those elements as well. To be able to give your inputs and buttons your own CSS, simply add the following to them: -webkit-appearance: none; -webkit-border-radius: 0;

Styling an IFrame With jQuery and CSS

<script> $(‘iframe’).load( function() { $(‘iframe’).contents().find(“head”) .append($(“<style type=’text/css’> .yourCSS{background:#eee} </style>”)); }); </script> That’s pretty much it. Add the script where it needs to load. As an example, I used this to style the quoting feature within a textarea: I believe there’s only very hacky ways of doing this if the IFrame isn’t coming from your own website. In

A Quick jQuery Solution For a Fixed Website Menu

With Beard Profile, we decided to make the website’s header fixed. This should fix issues with long-scrolling article content, and most definitely the Newsfeed content. We initially had a Back to Top button, but a fixed menu seems to be a better option when it comes to keeping visitors navigating on your website. This is