Responsive background image in card-header (Bootstrap 4)

UPDATE – since this post got so much heat, I made a simple CSS & HTML only panel with responsive image and card-header, see here.

This is a Bootstrap 4 version of the Responsive Background Image in Panel Heading (Bootstrap). Since they changed the panel class with the card class in Bootstrap 4, you just need to change the old Bootstrap 3 class names… here is my code and demo.

Here is the live demo.

Responsive background image in panel heading (Bootstrap)

Usually, on my freelance projects I use a beautiful responsive Bootstrap panel to display certain information like photos, offers, contact info, profile info and so on. I find very useful to play with the variables and see particular results depending on your cover image size and text that you need to display in the panel.

The structure is pretty simple, we have a simple Bootstrap style class logic that displays our panel and some custom css that we need to add to modify some settings like removing the standard Bootstrap border and rounded corners.

Here is the CSS:

HTML code:

I limited the width of the panel to see how it looks, usually, I use 2-3 panels in a row to display certain informations but, in my opinion, this type of panel looks better when is not displayed on a full width style.

Take a look at the results here.

Fixed Navbar that Disappears on Scroll Down (jQuery + Bootstrap)

In this post we will create a fixed navbar that disappears when the user scrolls down and reappears upon scrolling up using Bootstrap and jQuery.

Try it Yourself / Demo

You can alter the fadeIn() and fadeOut() or change them to other jQuery effect.

Change the background-color and the hover color and so on from the CSS file to fit your project needs and aesthetics.

CSS Image Sprites Example and How To Use Them

In this example I will show you how you can use only one image for your social media sharing nav-bar. Most of us use this sharing buttons-nav-bar so that our users can share our articles and content to their social media profiles.
Using this style of implementation can bring a few benefits to our user experience – if you are using this on a popular website with lots of requests – the css image sprite can lower your server requests so, instead of having 6 requests for every logo that we use in our example, we use just one request and we use CSS to display each image in a separate place on our page.

Instead of using three separate images, we use this single image ("sprite.png")

Youtube is just one of the heavily trafficked sites on the internet that uses sprites using one image to display all kinds of small images used in different places on the site:

CSS Image Sprites

HTML

Try it Yourself / Demo

Twitter Cards Guide (with examples)

What Are Twitter Cards?

Twitter Cards allow you to go beyond text and attach rich media experiences such as photos or videos to your tweets. They’re perfect for introducing new products, sharing articles and increasing conversions. Without leaving Twitter, your followers can make an impression on your content and think before clicking on your card.

Types of Twitter Cards

This are the five types of Twitter Cards:

  • 1.   Summary Card   (title, description, thumbnail, and Twitter account attribution)
  • 2.   Summary Card With Large Image   (similar to a Summary Card, but with a featured large image)
  • 3.   App Card   (Card to detail a mobile app with direct download)
  • 4.   Player Card   (Card to provide video/audio/media)

1. Summary Card

The Summary Card, limited to 140 characters — can be used for many kinds of web content, from blog posts to products and restaurants. This type of card was specially designed to give the reader a preview of the content before clicking through to your website.


2. Summary Card With Large Image

The Summary Card with Large Image features a large, full-width image. This type of card was designed to give the reader a rich photo experience, and clicking on the image brings the user to your website.


3. App Card

App Cards work better on mobile devices, the cards display limited info on desktops.

The App Card was designed to represent mobile applications on Twitter and to drive installs. The App Card allows to display a name, description and icon, and also to highlight attributes such as the rating and the price.


4. Player Card

The Player Card supports streaming media experiences by putting a live video or audio player inside your Tweet.

More info about Twitter Player Card here.

Why it’s ok to replace “http://” with “//” in a script

At least a dozen heavily trafficked sites use only // instead of https:// or http:// when linking to a *.css file, *.js file and sometimes, even when linking to other resources like external links. It seems to me that both versions are correct, using only // when linking to a script or style file. A relative URL without a scheme (http: or https:) is valid, per RFC 3986: “Uniform Resource Identifier (URI): Generic Syntax”, Section 4.2.

Sites like Youtube, Google, CNN, WordPress, TechCrunch, Twitter, Reddit use only // instead of http:// or https:// when linking to resource files or external links.

I can’t provide here the impact of excluding a few characters but, for heavily trafficked sites can make a difference I suppose eliminating the loading time and bandwidth.

Try it Yourself / Live DEMO

jQuery sidebar menu with show/hide link

This tutorial shows how to implement a jQuery sidebar menu with a show/hide link. The menu is using jQuery and css to handle the functionality.

See a live DEMO.

To make it work, all you need to do is edit the links showed in the menu/demo version and include all the files needed: jQuery, font-awesome(optional).

See a live DEMO.

Facebook Open Graph META Tags Example

Open Graph LogoThe Open Graph(OG) protocol enables any web page to become a rich object in a social graph using Meta Tags. As marketers create a lot digital content to attract users and engage them on social media – anyone who creates content must know about the Open Graph protocol and how to use the content and images to display the best social media experience for its users.

In this short example I will show you how to use the OG protocol to display a rich social media display for your links.

First of all, we need know the simple syntax of the META tag.

Open Graph uses a few attributes that you need to edit and integrate into your META tags.

There is no need to explain them all here, let me just show you how they look in plain code:

You can use the Facebook Debugger to see how your Open Graph tags look before publishing your content.

Check out a live DEMO of this example.

Responsive Google Map (Javascript & Google API V3)

This tutorial uses HTML5 and JavaScript to implement a responsive Google Maps map, no iframes or css code needed.

The main idea of this tutorial is to make the pointer on the map responsive / keep the pointer fixed on the chosen location on the map as we change the size of the window/map layout

Implementation guide

  • Get a Key/Authentication – Google Maps JavaScript API here
  • Edit the header line https://maps.googleapis.com/maps/api/js?key=[KEY]&callback=initMap and replace [KEY] with your unique Google Maps Key
  • Use Google Maps or other aplication to find the GPS coordinates of the location/pointer on the map and paste them on line 22 and 32 here like this: new google.maps.LatLng(51.506767, -0.1244953)

 

See a live DEMO or Download the code.