Categories
CSS HTML Web development

How to create round social media icons/ buttons?

How to create round social media icons/ buttons?

Demo:


To learn how to style the round social media icons/ buttons follow the steps below:

Step1.

Add HTML

Create the social media icons that you want to style:

<a href="#" class="fab fa-codepen"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-facebook"></a>
<a href="#" class="fab fa-tiktok"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-linkedin"></a>
<a href="#" class="fab fa-youtube"></a>
<a href="#" class="fab fa-pinterest"></a>
<a href="#" class="fab fa-snapchat-ghost"></a>
<a href="#" class="fab fa-skype"></a>
<a href="#" class="fab fa-dribbble"></a>
<a href="#" class="fab fa-yahoo"></a>

Step2.

Add CSS

Import the font-awesome font:

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');

Style the icons. Add border-radius: 50%; to create the round shape of the button and reduce the width to 30px:

.fab {
  padding: 20px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  transition: transform .2s;
  border-radius:50%;
}

.fab:hover {
  transform: scale(1.2);
}
.fa-codepen {
  background-color: #000;
  color: white;
}
    
.fa-instagram {
  background-color: #f72585;
  color: white;
}
    
.fa-facebook {
  background-color: #3B5998;
  color: white;
}
    
.fa-tiktok {
   color: white;
   background-color: #000;
    }

.fa-twitter {
  background-color: #55ACEE;
  color: white;
}

.fa-linkedin {
  background-color: #007bb5;
  color: white;
}

.fa-youtube {
  background-color: #bb0000;
  color: white;
}

.fa-pinterest {
  background-color: #cb2027;
  color: white;
}

.fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
  background-color: #00aff0;
  color: white;
}

.fa-dribbble {
  background-color: #ea4c89;
  color: white;
}

.fa-yahoo {
  background-color: #430297;
  color: white;
}

To see how to create the rectangle social media icons/buttons click here.

Enjoy coding!

Categories
HTML Web development

HTML alt Attribute

HTML alt Attribute

The HTML alt attribute gives alternative information for an image.

You can use the alt attribute with the following elements:

<area>

<img>

<input> (only can be used with <input type=”image”>)

Area Example:

<!DOCTYPE html>
<html>
<body>

<p>Click on the laptop, or the cup of coffee:</p>

<img src="https://lenadesign.org/wp-content/uploads/2021/06/homeOffice.jpg" alt="homeOffice" usemap="#workmap" width="640" height="480">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="laptop" href="https://lenadesign.org/wp-content/uploads/2021/06/laptop.jpg">
  <area shape="circle" coords="337,300,44" alt="coffee" href="https://lenadesign.org/wp-content/uploads/2021/06/photoshop-gif.gif">
</map>

</body>
</html>

Output:

Click on the laptop, or the cup of coffee:

homeOffice laptop coffee

Img Example:

<img src="https://lenadesign.org/wp-content/uploads/2021/07/small-avatar.jpg" alt="avatar" width="320" height="240">

Output:

avatar

Input Example:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="fname">First name: </label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name: </label>
  <input type="text" id="lname" name="lname"><br>
  <input type="image" src="https://lenadesign.org/wp-content/uploads/2021/06/submit-button.png" alt="Submit" width="100" height="100">
</form>

</body>
</html>

Output:




Enjoy coding!

Categories
CSS Web development

Viewport

Viewport

The viewport is the visible area of a web page. The viewport can vary with the device and will be smaller on a mobile phone and tablet than on a computer screen.

You can control the viewport, through the <meta> element. Include the following <meta> viewport element in your website to gives the browser instructions on how to control the page’s dimensions and scaling:


<meta name="viewport" content="width=device-width, initial-scale=1.0">

The width=device-width part sets the width of the page to follow the screen-width of the device (that will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Example:

  1. Without the viewport meta tag:
viewport meta tag

2. With the viewport meta tag:

viewport meta tag

Enjoy coding!

Categories
CSS HTML Web development

CSS Responsive Web Design – Introduction

CSS responsive web design makes your website look good on small devices (like tablets, or mobile phones).

CSS Responsive Web Design - Introduction

When you use CSS and HTML to resize, hide, stack, shrink, or move the content to make it look good on smaller screens, it is a responsive design.

Example:

To create the example above follow the steps below:

Step1.

Add HTML

Include the following <meta> viewport element in your website code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<div class="header">
  <h1>Fashion Store</h1>
</div>

<div class="row">
  <div class="col-3 col-s-3 menu">
    <ul>
      <li>Jackets</li>
      <li>Shoes</li>
      <li>Bags</li>
      <li>Dresses</li>
    </ul>
  </div>

  <div class="col-6 col-s-9">
    <h1>New In</h1>
    <p>Discover all the new arrivals of the women's ready-to-wear collection Fall-Winter 2021. Browse items that you need for your store: dresses, shoes, bags...</p>
  </div>

  <div class="col-3 col-s-12">
    <div class="aside">
      <h2>About Us</h2>
      <p>Our clothing and accessories are carefully curated to provide our customers the latest fashions.</p>
      <h2>Shipping</h2>
      <p>Worldwide Shipping.</p>
      <h2>Privacy & Cookies</h2>
      <p>When you visit our website, our web server collects some basic information such as your internet service provider's domain name...</p>
    </div>
  </div>
</div>

<div class="footer">
  <p>Resize the browser window to see the resizing effect.</p>
</div>

</body>
</html>

Step2.

Add CSS

Add the CSS @media rule to apply different styles for different media types/devices:

<style>
body {
  margin:0;
  padding:0;
}

* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

html {
  font-family: tahoma;
}

.header {
  background-color: #0a9396;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #005f73;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0a9396;
}

.aside {
  background-color: #005f73;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #001219;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
</style>

Read also:

CSS @media rule

Viewport

CSS Grid View

Enjoy coding!

Categories
HTML Web development

HTML action Attribute

HTML action Attribute

The HTML action attribute defines where to send the form-data when a form is submitted.

The HTML action attribute can be used on the <form> element.

Example:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="first-name">First name:</label>
  <input type="text" id="first-name" name="first-name"><br><br>
  <label for="last-name">Last name:</label>
  <input type="text" id="last-name" name="last-name"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Output:






Enjoy coding!

Categories
HTML Web development

HTML accesskey Attribute

HTML accesskey Attribute

The HTML accesskey attribute defines a shortcut key to activate/focus an element.

Note: The way of using the shortcut key is varying in different browsers: 

Browser:WindowsMac
Firefox
[Alt] [Shift] + accesskey
[Control] [Alt] + accesskey
Chrome
[Alt] + accesskey

[Control] [Alt] + accesskey
Safari
[Alt] + accesskey

[Control] [Alt] + accesskey
OperaOpera 15 or newer: [Alt] + accesskey
Internet Explorer[Alt] + accesskey

Example:

<!DOCTYPE html>
<html>
<body>

<a href="https://lenadesign.org/svg-4/" accesskey="s">SVG tutorial</a><br>
<a href="https://lenadesign.org/javascript/" accesskey="j">JavaScript tutorial</a>

</body>
</html>

Output:


Enjoy coding!

Categories
HTML Web development

HTML accept-charset Attribute

HTML accept-charset Attribute

The HTML accept-charset attribute defines the character encodings that are to be used for the form submission.

The HTML accept-charset attribute can be used on the <form>
element.

Example:

<!DOCTYPE html>
<html>
<body>

<form action="" accept-charset="utf-8">
  <label for="first-name">First name:</label>
  <input type="text" id="first-name" name="first-name"><br><br>
  <input type="submit" value="Send">
</form>

</body>
</html>

Output:




Enjoy coding!

Categories
HTML Web development

HTML input accept Attribute

HTML input accept Attribute

The HTML accept attribute defines a filter for what file types the user can pick from the file input dialog box.

Syntax:

<input accept="file_extension|audio/*|video/*|image/*|media_type"> 

file_extension – define the file extension (e.g: .jpg, .png, .doc, .gif) the user can pick from.

audio/* – the user can pick all sound files.

video/* – the user can pick all video files.

image/* – the user can pick all image files.

media_type – a valid media type, with no parameters.

Example:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="img">Select image:</label>
  <input type="file" id="img" name="img" accept="image/*">
  <input type="submit" value="Submit">
</form>

</body>
</html>

Output:


Enjoy coding!

Categories
HTML Web development

HTML pre tag

HTML pre tag

The HTML <pre> element specifies pre-formatted text.

Text in a <pre> tag is displayed in a fixed-width font, and the text preserves both spaces and line breaks (the text will be displayed exactly as written in the HTML source code).

Example:

<!DOCTYPE html>
<html>
<body>

<pre>
Text in a pre tag
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>

</body>
</html>

Output:

Text in a pre tag
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.

To create a pre-formatted text with a fixed width (with CSS):

<!DOCTYPE html>
<html>
<body>

<div style="width:250px;overflow:auto">
<pre>This is a pre with a fixed width. It will use as much space as defined.</pre>
</div>

</body>
</html>

Output:

This is a pre with a fixed width. It will use as much space as defined.

Enjoy coding!

Categories
HTML Web development

HTML audio tag

HTML audio tag

The HTML <audio> element is used to embed sound content in a document (such as music or other audio streams).

The HTML <source> element allows you to specify alternative audio files which the browser may choose from.

Example:

<!DOCTYPE html>
<html>
<body>

<audio controls>
  <source src="https://lenadesign.org/wp-content/uploads/2021/07/Wooden-Train-Whistle.mp3" type="audio/mpeg">
</audio>

</body>
</html>

Output:


Attributes:

autoplay (value- autoplay) – defines that the audio will start playing as soon as it is ready.

Syntax:

<audio autoplay> 

controls (value- controls) – defines that audio controls should be displayed (play/pause button).

Syntax:

<audio controls> 

loop (value- loop) – defines that the audio will start over again (every time it is finished).

Syntax:

<audio loop> 

muted (value- muted) – defines that the audio output should be muted.

Syntax:

<audio muted> 

preload (value- auto/ metadata/ none) – defines if and how the author thinks the audio should be loaded when the page loads.

<audio preload="auto|metadata|none"> 

src (value- URL) – defines the URL of the audio file.

<audio src="URL"> 

Example:

<!DOCTYPE html>
<html>
<body>

<audio src="https://lenadesign.org/wp-content/uploads/2021/07/Wooden-Train-Whistle.mp3" controls>
</audio>

</body>
</html>

Output:


Enjoy coding!