Create a Featured Ribbon Effect Using CSS

We’ve all seen those box, rectangle, or square shaped HTML elements that feature a “ribbon” draped around one of its corners to signify that this element is somehow different from the rest. The text in the corner ribbon might read “Featured” or “Limited Time Only” or “On sale!” Whatever the ribbons may say, they usually do a pretty good job of grabbing the users’ attention and letting them know what’s unique about any particular HTML element that the ribbon is applied to.

This Featured Ribbon effect is actually one that can be easily implemented using minimal CSS. The effect is created by the use and manipulation of the span elements and the :before and :after pseudo selectors. To see how it’s done, check out the example below.

The HTML

The HTML in this tutorial couldn’t be more straightforward. We’ve got an image inside of a rectangular div…and that’s pretty much it. The other div, the one with the class .corner-ribbon, makes up the featured ribbon that will appear on the corner of the element.

<div class="container">
 <div class="corner-ribbon">
 <span>Cool!</span>
 </div>
 <h4>Cool Feature</h4>
 <img src="http://lorempixel.com/175/175/" alt="placeholder image" />
</div>

The CSS

The CSS for this effect is a lot more involved than the HTML, but it’s still actually quite simple. By using the :before and :after pseudo-selectors in conjunction with transparent borders, the shape of the featured ribbon is easily created. Absolute positioning and playing with the z-index (you may need to increase the value of the z-index property depending on your project), the ribbon is featured prominently in the top right corner of the element.

@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700);

body{
 font-family: 'Quicksand';
 background-color: #e6e6e6;
}

.container {
 width: 220px;
 height: 300px;
 position: relative;
 border:1px solid #444;
 background: #fff;
 margin: 25px auto;
}

.corner-ribbon {
 position: absolute;
 right: -5px; top: -5px;
 z-index: 1;
 overflow: hidden;
 width: 75px; 
 height: 75px; 
 text-align: right;
}

.corner-ribbon span {
 font-size: 12px;
 color: #fff; 
 text-transform: uppercase; 
 text-align: center;
 font-weight: bold; 
 line-height: 20px;
 transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 width: 100px; 
 display: block;
 background: #E37676;
 background: linear-gradient(#E37676, #DB5858);
 box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
 position: absolute;
 top: 19px; right: -21px;
}

.corner-ribbon span::before {
 content: '';
 position: absolute; 
 left: 0px; top: 100%;
 z-index: -1;
 border-left: 3px solid #E37676;
 border-right: 3px solid transparent;
 border-bottom: 3px solid transparent;
 border-top: 3px solid #E37676;
}
.corner-ribbon span::after {
 content: '';
 position: absolute; 
 right: 0%; top: 100%;
 z-index: -1;
 border-right: 3px solid #E37676;
 border-left: 3px solid transparent;
 border-bottom: 3px solid transparent;
 border-top: 3px solid #E37676;
}

.container h4{
 padding: 3px;
 text-align: center;
}

.container img{
 display: block;
 width: 175px;
 margin: 0 auto;
}

After adding all of the above CSS to your stylesheets,  you should end up with a final product that looks something like this:

As always, the colors, content, positioning, etc are meant to be totally customized to reflect your project. Play around with the code and have fun with it!

How to Create a Fixed Header

Fixed headers are an increasingly popular trend for styling headers or navigation menus on your site. When you add a fixed header to a page, that means that the position of the header stays fixed (usually to the top of the page, but it doesn’t necessarily have to be positioned as such) no matter how far the user scrolls down the page. This feature is helpful for anyone who wants to make sure their users always have access to particular links or navigation no matter which part of the page they may be exploring.

If you think that adding a fixed header to any of your projects might be a good idea or, at the very least, a fun experiment, you’re in luck, because it’s actually pretty easy to do. Keep reading and we’ll walk you through the basic steps.

The HTML

For a very, very basic fixed header structure, we used something like this:

<body>

<div class="header">
 <h1 class="header_logo">This is a Fixed Header</h1>
</div>
<div class="offset">
 <p>Scroll down to see the responsive header in action.</p>
</div>

</body>

It’s totally up to you what you want to include in your header. It could be navigation, links, a phone number or other contact info…the choice is completely yours. For the purposes of this demonstration, we just chose to include some text indicating that what you’re looking at is, in fact, a fixed header, and some content below that so we have something to scroll past.

The CSS

We wanted our fixed header to be purple, but the color choice and style of your header is totally up to you. The only line of CSS you absolutely can’t do without if you want the header to be fixed is position: fixed, which in our code is applied to the .header selector. The size, color, positioning, padding, font-family, and pretty much everything else can be tailored to the needs of your project or site.

Check out the CSS below:

body {
 height: 1500px;
 font-family: "Montserrat";
}

.offset {
 margin-top: 0;
 padding-top: 270px;
 text-align: center;
 -webkit-transition: .3s;
 transition: .3s;
}

.header {
 position: fixed;
 width: 100%;
 height: 100px;
 font-weight: bold;
 text-align: center;
 background: #7F6FF0;
 -webkit-transition: .3s;
 transition: .3s;
 color: #fff;
}

.header_logo {
 font-family: 'Oswald', sans-serif;
 margin: 0;
 padding-top: 8px;
 font-size: 30px;
 text-shadow: 3px 4px rgba(0, 0, 0, 0.1);
 -webkit-transition: .3s;
 transition: .3s;
}

If you use the code above, this is how your fixed header should look:

Screen Shot 2016-12-20 at 8.53.55 AM

While you can’t really appreciate the whole fixed header effect from just a screenshot, trust us when we say that when you scroll down this page , you will scroll past the text and end up with the header still stuck to the to of the page. Add the code to any of your projects to see it in action for yourself!

Best Resources to Learn to Code for Free

If you’ve ever wanted to learn how to code (or maybe you know some basics, but would like to learn more), now’s the time to do it. There are dozens of free code classes and bootcamp-type courses available to accommodate all levels and all schedules so that you can learn at your own pace. Whether you’ve never coded before in your life, or you’re an experienced coder looking to brush up their skills or learn a new language, there’s a good, free code course resource out there for you. Take a look at the list of free coding resources below to see if there’s something that suits you!

Free Code Camp

Free Code Camp is a unique resource in that it doesn’t just offer free code lessons, but it also allows its “students” to use their newly-acquired coding skills to work on real projects for non-profit organizations. Not only do you learn valuable coding skills, but you also get to start creating a portfolio that can be really helpful to you if your ultimate goal is to get a job in web development.

Codecademy

Codecademy is one of the most popular free coding resources, and has free interactive courses for several different languages, including HTML & CSS, JavaScript & jQuery, Python, Ruby, and PHP. In addition to teaching the fundamentals of these popular languages, they also offer courses in practical things, like website deployment, how to use Git, how to use SQL, how to learn Angular and Sass, etc. This resource is a great one for someone who’s interested in learning to code and wants to learn a little to see if it’s right for them.

Coursera

Coursera lets you take free coding classes from actual accredited schools and universities (schools like Hopkins, Duke, and Wesleyan, just to name a few, are among some of the ones offering free coding and computer science courses). While you will have to pay for some of the more advanced classes, it’s still a great research to receive some top notch education for free.

Udemy

Udemy is an online learning platform that offers over 40,000 courses in many different subjects, including coding and web development. Like Coursera, you’ll have to pay for some of the courses (especially the non-introductory ones), but if you’re looking to get a solid education in web development languages, this is the place to go.

HTML5 Rocks

HTML5 Rocks is a Google project that offers free tutorials and resources tailored to people who want to learn about code and tech. This site is an awesome resource for people who are already interested in web development or already know a little code, but are striving to learn more and be better informed.

Khan Academy

Like Udemy, Khan Academy offers courses in a variety of subjects, but their computer programming courses are known to be quite good. You can use Khan’s courses to teach yourself the basics of coding languages, and then you can also choose to take more advanced courses that will show you how to use the fundamentals to create projects to add to your portfolio.

Code Avengers

Code Avengers helps you to learn code interactively by letting you create web applications while learning new languages. When you’re done, you can add the projects to your portfolio to show off your skills and your coding knowledge.

 

Tips for Cross Browser Compatibility

Developing and designing for every browser type can be a very challenging (some might say impossible) task. Every browser has its own unique inherent styling that (even with the use of a reset) can be difficult to override or get rid of completely, and not every browser supports some of the newer, cool CSS properties and techniques. For these reasons, it can be really tricky to make sure that your site designs look good and consistent (and functional!) across every single browser. While accounting for cross browser compatibility can be a daunting task, it can be made easier by applying the following tips.

Use Vendor Prefixes

This one is probably the most common way to avoid cross browser compatibility issues. A lot of CSS properties (particularly the newer ones) aren’t supported on most browsers, unless you use a vendor prefix. As a developer, you may want to cover all your bases when using a CSS property that isn’t widely supported (like, for example, the transition property) to make sure that your designs (or in the case of the transition property, your animated effects) actually work in every browser. The following is a list of the vendor prefixes that can be used for every browser:

-webkit-   //chrome, android, safari, ios
-o-   //opera
-moz-   //firefox
-ms- //internet explorer

Here’s how you would use them in context:

div{
transition: all .5s ease;
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
}

Don’t forget to include hyphens on either side of your prefix keyword!

Browser Hacks

If you want to target a specific property or style rule to behave a particular way based on the browser, there are a number of different CSS “hacks” that will allow you to target a specific browser and apply style rules to HTML elements only if they appear on one particular browser. This works well when you’re trying to compensate for a style or property that might work on all browsers except for one. This way, you can use a hack to single out a specific browser and change the styling only for that one to make sure your design doesn’t look funky or your functionality isn’t compromised without the unsupported CSS property. Check out the list of hacks for common browsers below:

/* Internet Explorer Versions 9+ */
@<span class="hljs-keyword">media</span> screen and (min-width:<span class="hljs-number">0</span>\<span class="hljs-number">0</span>) {
<span class="hljs-selector-class">.<strong>yourElement</strong></span> {
font-size: 12px;
}
}

/* Firefox Versions 3+ */
<span class="hljs-selector-tag">html</span>><span class="hljs-comment">/**/</span><span class="hljs-selector-tag">body</span> <span class="hljs-selector-class">.<strong>yourElement</strong></span>, <span class="hljs-selector-tag">x</span><span class="hljs-selector-pseudo">:-moz-any-link</span>, <span class="hljs-selector-tag">x</span><span class="hljs-selector-pseudo">:default</span> {
<span class="hljs-attribute">font-size: 12px;</span><span class="hljs-meta">
</span>}

/* Chrome and Safari */
@<span class="hljs-keyword">media</span> screen and (-webkit-min-device-pixel-ratio:<span class="hljs-number">0</span>) {
<span class="hljs-selector-class">.<strong>yourElement</strong></span> {
<span class="hljs-attribute">font-size</span>: 12px;<span class="hljs-number">
</span>}
}

Make sure you insert the name of the element you’d like to single out in the spot where it’s written .yourElement in bold.

Use CSS @supports Rule

The CSS @supports allows you to wrap your CSS rules within the @supports query so that the rule will only be applied if it’s supported on a particular browser. If a rule isn’t supported, it’ll get skipped over as if the rule weren’t there, which can really come in handy for those properties you want to use but don’t want to look terrible if they happen to not be supported on a browser. Here’s how you would use it in context:

@supports(transition: all .5s ease){
div{
transition: all .5s ease;
}
}

In order to use @supports, you’ll have to pass through the CSS rule you want to account for as a parameter, and then the code will take care of the rest.

HTML5 Fullscreen Background Video with CSS and JS (Plugin/Library)

Fullscreen background videos that autoplay right when the webpage loads (above the fold) has become quite a popular trend these days. Personally I think a fullscreen good quality video that autoplays does increases engagement for the users/customers. It should be kept in mind that the story of the video must be relevant to the brand. These days we’re surrounded by loads of videos on social networks like FB and Twitter as well which autoplay (but is muted of course). Analytical studies have also reported higher engagement due to this.

Continue reading “HTML5 Fullscreen Background Video with CSS and JS (Plugin/Library)”

Hello world!

Hello from Yet Another Blogger! My name is Rishabh, a freelance web developer from India. I’ll use this blog to post some tips and tricks that I learn while working on various projects (personal or for clients). Some articles might also get into the details of several interesting topics, but I’ll try to keep them precise so that you can read quick, learn and get to work.

Quite excited about this!