Text Effects: Give Yourself a Fancy Ampersand

This post is about demonstrating a fun way to add some life to some otherwise plain and boring text by adding some simple but effective styling to the ampersands in your projects. This CSS Snippet, originally adapted from a CSS Tricks snippet, gives you the ability to add some serious style to your ampersands using only a few lines of CSS and one span tag. If you want your ampersand symbols (which, if you’re not familiar with the term, is simply the and sign: “&”) to look both fancy and stylish, you can check out the following snippet.

First, let’s start with a little HTML. The text can be anything you want, but be sure to include the <span> tags around your ampersand.

<p>Peanut Butter <span class="amp">&amp;</span> Jelly</p>

For reference, this is what our HTML looks like without any style applied to it:

Screen Shot 2017-03-18 at 12.12.29 PM

To jazz it up, we’re going to add a nice body font and a font specifically for the .amp class, which in this example applies to the ampersand only. We’re also going to apply an italic style to the ampersand, and give it a font-weight of normal, which will help it stand out from bold fonts if it happens to be in the midst of any.

Here’s how the CSS should look:

body{
 font-family: 'Futura';
 font-size: 24px;
 }
 .amp{
 font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
 font-style: italic;
 font-weight: normal;
 }

The final product should look like this:

Screen Shot 2017-03-18 at 12.14.14 PM

Remember, the code snippet is totally customizable, so if you’re not a fan of Baskerville, feel free to choose a “fancy font” that is more suited to you and your project. Everything else, from font sizes to colors to actual text content, are also completely customizable and you can change them to anything you like (but if you really want text that says Peanut Butter & Jelly, that’s fine too).

Creating a Footer that Sticks to the Bottom of the Viewport

Creating a sticky footer (one that sticks to the bottom of the screen or viewport no matter what) is something that seems like it would be simple to achieve, but actually can be kind of a nuisance. The issue with footers is that sometimes if your page doesn’t have a lot of content and doesn’t […]

Read on...

How to Create Animated CSS Gradients

Screen Shot 2017-03-14 at 11.12.14 AM

The CSS Gradient Animator is a really cool tool that allows you to create your own animated CSS gradients quickly and super easily. It allows you to customize everything from colors, to speed of the animation, to angle of the gradient and angle of the scroll. You can also choose to not animate the gradient […]

Read on...

How to Minify Your CSS

Screen Shot 2017-03-14 at 11.04.30 AM

Minifying your CSS is a great and really easy option for optimizing the speed of your site. When you minify your CSS, you’re basically compressing the files so that they’re smaller and easier for your server to grab quickly. Having minified CSS files (and JavaScript files too!) can go a long way in making your […]

Read on...

5 Colors to Use for Your Late Winter Projects

marchcolors

It’s March, which means spring is almost here, but we’re not totally finished with winter yet. If you’re not sure how to bridge the gap between these two seasons in terms of color, we’re here for you. Check out this free color palette generated specifically for the month of March — use these colors on your […]

Read on...

CSS Snippets: Split Color Text Effect

Screen Shot 2017-03-07 at 11.25.45 AM

Over here at CSS Newbie, we love using CSS to create unique text effects for our projects. Today, we’re going to use CSS to create a split-color text effect, where an angled line is drawn through a block of text, and the text is one color above the line, and another color below the line. […]

Read on...

Compensate for Internet Explorer with PIE

Screen Shot 2017-03-01 at 12.51.41 PM

As a developer or designer, you probably know that not all browsers (especially not all older versions of browsers) have support for all the nifty CSS properties. In particular, older versions of Internet Explorer that are still in pretty wide use don’t always have support for some pretty common properties, such as border-radius, linear-gradient, and […]

Read on...

Top 5 Interactive CSS Code Snippets

Screen Shot 2017-03-01 at 10.38.12 AM

The CSS tutorial site The Code Player offers really cool and unique tutorials that can help you to learn and understand CSS in a meaningful way. What makes The Code Player’s tutorials so unique is that instead of just download a file or viewing lines of code and a finished product, the tutorials are interactive because […]

Read on...

Free Color Palette for Your Spring Projects

springcolors

Got the winter blues? Feeling uninspired? Or just looking for a fun, bright color palette to add some life to your projects? We’ve put together a free, trendy color scheme for you to use in any of your upcoming projects. Check it out below: Featuring a subdued pink, a neutral creme, a bright green, a […]

Read on...

6 Cool Ways to Use Shadows in CSS

Screen Shot 2017-02-21 at 10.56.31 AM

CSS’s box-shadow and text-shadow properties are incredibly versatile, allowing you not just to add shadows to various elements and text, but also making it possible to create cool, multi-dimensional effects for your projects. If you’re looking for inspiration on new ways to use shadows in your sites, check out this list of some of the […]

Read on...