Categories
CSS HTML Web development

CSS border-bottom-style Property

CSS border-bottom-style Property

Demo:

The CSS border-bottom-style property settles the style of an element’s bottom border.

Syntax:

border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

none (default) – defines no border.

hidden – a border is not visible.

dotted – defines a dotted border.

dashed – defines a dashed border.

solid – defines a solid border.

double – defines a double border.

groove – defines a 3D grooved border.

ridge – defines a 3D ridged border.

inset – defines a 3D inset border.

outset – defines a 3D outset border.

Example1:

A dotted bottom border:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border-bottom-style: dotted;
}

p {
  border-style: solid;
  border-bottom-style: dotted;
}
</style>
</head>
<body>

<div>A div element with a dotted bottom border</div>

<p>A paragraph with a dotted bottom border.</p>

</body>
</html>

Output:

A div element with a dottoed bottom border

A paragraph with a dotted bottom border.

Example2:

A double bottom border:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border-bottom-style: double;
}

p {
  border-style: solid;
  border-bottom-style: double;
}
</style>
</head>
<body>

<div>A div element with a double bottom border</div>

<p>A paragraph with a double bottom border.</p>

</body>
</html>

Output:

A div element with a double bottom border

A paragraph with a double bottom border.

Enjoy coding!

Read also:

CSS border Property

CSS Outline

CSS Border Corner Shape: Scoop, Notch, Square-Cut

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
CSS HTML Web development

How to create social media icons/ buttons?

How to create social media icons/ buttons?

Demo:


To learn how to style the 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:

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

.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 round social media icons/buttons click here.

Enjoy coding!

Categories
CSS HTML Web development

CSS Hamburger Menu

CSS Hamburger Menu

To create the CSS Hamburger Menu follow the steps below and watch the video tutorial:

Demo:

Step1.

Add HTML

Create the hamburger-menu container, add input checkbox and the vertical-menu:

<div class="hamburger-menu">
<div class="menu-toggle">
  <input id="toggle" type="checkbox">
  <label class="toggle" for="toggle"></label>
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  
<div class="vertical-menu">
  <a href="#" class="home">Home</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</div>
</div>
  </div>

Step2.

Add CSS

Set the colour and position of the background and elements:

body {
  margin:0;
  padding:0;
}

Style and the hamburger icon:

.menu-toggle {
  margin:30px;
}

input#toggle {
  display: none;
}

.toggle {
  position: absolute;
  width:35px;
  height: 30px;
  background-color: transparent;
  z-index:5;
  top:8px;
  left:30px;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  position: absolute;
  cursor: pointer;
  width: 35px;
  height: 5px;
  background-color: #001219;
  border-radius:5px;
  transition: 0.4s;
  border-radius:5px;
}
.bar1 {
  top:10px;
}
.bar2 {
  top:20px;
}

.bar3 {
  top:30px;
}

Animate the hamburger icon:

#toggle:checked ~ .bar1 {
  transform: rotate(-45deg) translate(-7px, 7px);
}

#toggle:checked ~ .bar2 {
  opacity:0;
}

#toggle:checked ~ .bar3 {
  transform: rotate(45deg) translate(-8px, -8px);
}

Style the vertical-menu:

.vertical-menu {
  width: 300px;
  position: absolute;
  top:0;
  left:0;
  text-align: center;
  z-index:-1;
  visibility: hidden;
  opacity:0;
  transition: opacity .4s;
}

.vertical-menu a {
  background-color: #e9d8a6;
  display: block;
  padding: 12px;
  text-decoration: none;
  font-family: tahoma;
  color: #001219;
}

.vertical-menu a:hover {
  background-color: #005f73;
  color: white;
}

#toggle:checked ~ .vertical-menu {
  visibility: visible;
  opacity:1;
}

a.home {
  background-color: #0a9396;
}

Watch also video tutorial:

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 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!