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

CSS Desk Lamp (Switch On/ Off)

CSS Desk Lamp (Switch On/ Off)

To create the CSS Desk Lamp (Switch On/ Off) follow the steps below and watch the video tutorial.

Demo:

*to see the CSS Desk Lamp (Switch On/Off) on the website click here.

Step1.

Add HTML

<div class="lamp-container">
  <div class="window"></div>
  <div class="computer"></div>
  <div class="screen"></div>
  <div class="picture"></div>
  <div class="coffee"></div>
  <input id='light' type='checkbox'>
  <label class='light' for='light'></label>
  <div class="lamp-base"></div>
  <div class="tube"></div>
  <div class="lamp-shade"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the container and elements:

body {
  height: 100vh;
  justify-content: center;
  align-items: center;
  display: flex;
}

Style the container:

.lamp-container {
  position: relative;
  width: 400px;
  height: 400px;
  overlfow: hidden;
  background-color: #192c3d;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

.lamp-container:after {
  content:"";
  position: absolute;
  background-color: #3b312a;
  width:350px;
  height: 13px;
  top:300px;
  left:25px;
}

.lamp-container:before {
  content:"";
  position: absolute;
  width:5px;
  height:100px;
  background-color: #2f425a;
  top:300px;
  left:40px;
  box-shadow: 5px 0 #1c364d, 20px 0 #2f425a, 25px 0 #1c364d, 290px 0 #1c364d, 295px 0 #2f425a, 310px 0 #1c364d, 315px 0 #2f425a;
}

Style the window, computer, coffee and the picture:

.computer {
  position: absolute;
  border: 8px solid #535460;
  width: 120px;
  height: 70px;
  background-color: #5b6580;
  top:187px;
  left:150px;
}

.computer:before {
  content:"";
  position: absolute;
  background-color: #42434f;
  width: 30px;
  height:30px;
  top:78px;
  left:45px;
}

.computer:after {
  content:"";
  position: absolute;
  background-color: #31323b;
  width: 100px;
  height: 7px;
  top:98px;
  left:10px;
}

.window {
  position: absolute;
  width: 200px;
  height: 250px;
  border: 10px solid #243e54;
  background-color: #376ea3;
  left:180px;
}

.window:before {
  content:"";
  position: absolute;
  height: 250px;
  width: 10px;
  background-color: #243e54;
  left:95px;
}

.window:after {
  content:"";
  position: absolute;
  background-color: #335266;
  width: 220px;
  height:10px;
  left:-10px;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 15px #335266, 0 30px #335266, 0 45px #335266, 0 60px #335266, 0 75px #335266, 0 90px #335266,0 105px #335266, 0 120px #335266, 0 135px #335266, 0 150px #335266, 0 165px #335266, 0 180px #335266, 0 195px #335266, 0 210px #335266, 0 225px #335266, 0 240px #335266;
}

.picture {
  position: absolute;
  width:100px;
  height: 70px;
  border: 5px solid #2f4f67;
  background-color: #8b8c8e;
  left:25px;
  top:80px;
  overflow: hidden;
}

.picture:before {
  content:"";
  position: absolute;
  border-radius:50%;
  width: 18px;
  height: 18px;
  background-color: #fff084;
  left:15px;
  top:7px;
}

.picture:after {
  content:"";
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #3e4758;
  top:30px;
  box-shadow: 45px 20px #606c82,40px 10px #3e4758,80px 20px #3e4758, 60px -10px #606c82;
}

.screen {
  position: absolute;
  width: 120px;
  height: 70px;
  overflow: hidden;
  top:195px;
  left:158px;
}

.screen:before {
  content:"";
  position: absolute;
  width: 40px;
  height: 20px;
  opacity:0.3;
  background-color: #0e212f;
  top:10px;
  left:15px;
  box-shadow: 0 30px #0e212f, 50px 0 #0e212f, 50px 20px #0e212f, 50px 30px #0e212f;
}

.screen:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.2);
  width:150px;
  height: 150px;
  transform: skew(60deg);
  left: 65px;
  top:-38px;
}

.coffee {
  position: absolute;
  width: 40px;
  height: 30px;
  background-color: white;
  border-radius:0 0 20px 20px;
  top:270px;
  left:295px;
}

.coffee:before {
  content:"";
  position: absolute;
  background-color: #d16d72;
  width:60px;
  height:5px;
  border-radius:0 0 30px 30px;
  top:25px;
  left:-10px;
}

.coffee:after {
  content:"";
  position: absolute;
  border: 4px solid white;
  width:10px;
  height: 10px;
  border-radius:50%;
  left:32px;
  top:2px;
}
CSS desk lamp

Style the lamp:

.lamp-base {
  position: absolute;
  width: 70px;
  height: 7px;
  background-color: #0e8488;
  top:292px;
  left:50px;
  z-index:2;
}

.lamp-base:before {
  content:"";
  position: absolute;
  width: 60px;
  height: 10px;
  background-color: #0b9496;
  border-radius: 10px 10px 0 0;
  top:-10px;
  left:5px;
}

.tube {
  background-color: #979dac;
  position: absolute;
  width:5px;
  height: 100px;
  top:190px;
  left:50px;
  transform: rotate(-20deg);
  z-index:1;
  box-shadow: 10px 0 #7e8491;
}

.tube:before {
  content:"";
  position: absolute;
  background-color: #979dac;
  width:5px;
  height: 100px;
  transform: rotate(80deg);
  top:-70px;
  left:60px;
  box-shadow: 10px 0 #7e8491;
}

.tube:after {
  content:"";
  position: absolute;
  border-radius:50%;
  width: 10px;
  height:10px;
  background-color: #1b7776;
  border:3px solid #175961;
  outline: 3px solid #1b7776;
  top:-13px;
  left:0;
}

.lamp-shade {
  position: absolute;
  background-color: #0f2230;
  width: 30px;
  height: 30px;
  border-radius: 30px 30px 0 0;
  top:110px;
  left:125px;
  z-index:3;
  transform: rotate(-25deg);
}

.lamp-shade:before {
  content:"";
  position: absolute;
  border-radius: 50px 50px 0 0;
  background-color: #089697;
  width:70px;
  height:30px;
  top:28px;
  left:-20px;
  transform: rotate(5deg);
}

.light {
  border-radius:50%;
  position: absolute;
  background-color: #fff07c;
  width:30px;
  height: 30px;
  top:145px;
  left:140px;
}

.light:before {
  content:"";
  position: absolute;
  width: 45px;
  height:0;
  border-bottom: 150px solid rgba(255, 240, 124,0.3);
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  transition: .3s;
  top:10px;
  left:-3px;
  transform: skew(20deg);
  opacity:0;
}

.light:after {
  content:"";
  position: absolute;
  width: 10px;
  height:7px;
  background-color: #1e5b63;
  top:130px;
  left:-47px;
  border-radius: 5px 5px 0 0;
  transition: .2s;
  transform-origin: bottom;
  cursor: pointer;
}

Use the input checkbox to on/off the light:

input#light {
  display: none;
}

#light:checked + .light:after {
  transform: scaleY(0.5);
}

#light:checked + .light:before {
  opacity:1;
}

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

CSS backface-visibility Property

CSS backface-visibility Property

The CSS backface-visibility property specifies whether or not the back face of an element should be visible when facing the user.

The back face of an element is a mirror image of the front face being displayed (this CSS property is useful when an element is rotated).

Demo:

Hover over the square to see the effect:

backface-visibility: visible;

Hello!

backface-visibility: hidden;

Hello!

Syntax:

backface-visibility: visible|hidden;

visible (default) – the backside is visible.

hidden – the backside is not visible.

Example:

<!doctype html>
<html>
<head>
<style>
.one {
   width:100px;
   height: 100px;
   background-color: #2a9d8f;
   margin:10px;
   text-align: center;
   font-size: 30px;
   backface-visibility: visible;
   transform: rotateY(180deg);
    }
</style>
</head>

<body>
<div class="one">Hello!</div>
</body>
</html>

Output:

Hello!

Enjoy coding!

Categories
CSS Web development

How to place text over an image?

How to place text over an image?

To learn how to position text over an image with CSS follow the steps below:

Demo:

Step1.

Add HTML

Create the image container and add an image:

<div class="image-container">
  <img src="https://lenadesign.org/wp-content/uploads/2020/07/css-ice-cream.jpg" alt="ice-cream">
  <div class="left-b">Some Text...</div>
  <div class="left-t">Some Text...</div>
  <div class="right-t">Some Text...</div>
  <div class="right-b">Some Text...</div>
  <div class="center">Some Text...</div>
</div>

Step2.

Add CSS

Use CSS to position the text on an image (in the center, top right, top left, bottom right or bottom left):

.image-container {
  position: relative;
  text-align: center;
  color: #000;
  font-size:35px;
}

.left-b {
  position: absolute;
  bottom: 10px;
  left: 18px;
}

.left-t {
  position: absolute;
  top: 10px;
  left: 18px;
}

.right-t {
  position: absolute;
  top: 10px;
  right: 18px;
}

.right-b {
  position: absolute;
  bottom: 10px;
  right: 18px;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Enjoy coding!

Categories
CSS Web development

CSS justify-content Property

CSS justify-content Property

The CSS justify-content property aligns the flexible container’s items when the items do not use all available space on the main-axis (horizontally).

Note: To align the items vertically use the align-items property.

Demo:

Syntax:

justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly;

flex-start (default) – items are positioned at the beginning of the container.

flex-end – items are positioned at the end of the container.

center – items are positioned in the center of the container.

space-between – items will have space between them.

space-around – items will have space before, between, and after them.

space-evenly – items will have equal space around them.

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
#content {
  width: 200px;
  height: 200px;
  border: 3px solid #333;
  display: flex;
  justify-content: center;
}

.one, .two, .three {
  width: 40px;
  height: 40px;
}
</style>
</head>
<body>

<div id="content">
  <div class="one" style="background-color:#e76f51;">1</div>
  <div class="two" style="background-color:#e9c46a;">2</div>
  <div class="three" style="background-color:#2a9d8f;">3</div>
</div>

</body>
</html>

Output:

1
2
3

Note: Internet Explorer 10 and earlier versions do not support the justify-content property!

Enjoy coding!

Categories
CSS Web development

CSS align-self Property

CSS align-self Property

The CSS align-self property defines the alignment for the selected item inside the flexible container.

Demo:

Syntax:

align-self: auto|stretch|center|flex-start|flex-end|baseline;

auto (default) – the element inherits its parent container’s align-items property, or “stretch” if it has no parent container.

stretch – the element is positioned to fit the container.

center – the element is positioned at the center of the container.

flex-start – the element is positioned at the beginning of the container.

flex-end – the element is positioned at the end of the container.

baseline – the element is positioned at the baseline of the container.

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
#box-content {
  width: 200px;
  height: 200px;
  border: 3px solid #333;
  display: flex;
  align-items: flex-start;
}

.one, .two, .three {
  flex: 1;
}

.two {
  align-self: center;
}
</style>
</head>
<body>

<div id="box-content">
  <div class="one" style="background-color:#e76f51;">One</div>
  <div class="two" style="background-color:#e9c46a;">Three</div> 
  <div class="three" style="background-color:#2a9d8f;">Third div with more content.</div>
</div>

</body>
</html>

Output:

One
Three
Third div with more content.

Note: Internet Explorer 10 and earlier versions do not support the align-self property!

Enjoy coding!

Categories
CSS Web development

CSS align-items Property

CSS align-items Property

The CSS align-items property defines the default alignment for items inside the flexible container.

Demo:

Syntax:

align-items: stretch|center|flex-start|flex-end|baseline;

stretch (default) – items are stretched to fit the container.

center – items are positioned at the center of the container.

flex-start – items are positioned at the beginning of the container.

flex-end – items are positioned at the end of the container.

baseline – items are positioned at the baseline of the container.

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
#content {
  width: 200px;
  height: 200px;
  border: 3px solid #333; 
  display: flex;
  align-items: center;
}

.one, .two, .three {
   flex: 1;
}
</style>
</head>
<body>

<div id="content">
  <div class="one" style="background-color:#e76f51;">One</div>
  <div class="two" style="background-color:#e9c46a;">Two</div>  
  <div class="three" style="background-color:#2a9d8f;">Third div with more content.</div>
</div>

</body>
</html>

Output:

One
Two
Third div with more content.

Note: Internet Explorer 10 and earlier versions do not support the align-items property!

Enjoy coding!

Categories
CSS Web development

CSS align-content Property

CSS align-content Property

The CSS align-content property modifies the behaviour of the flex-wrap property.

Demo:

The CSS align-content property is similar to align-items property, but instead of aligning flex items, it aligns flex lines.

Syntax:

align-content: stretch|center|flex-start|flex-end|space-between|space-around;

stretch (default) – lines stretch to take up the remaining space.

center – lines are packed toward the center of the flex container.

flex-start – lines are packed toward the start of the flex container.

flex-end – lines are packed toward the end of the flex container.

space-between – lines are evenly distributed in the flex container.

space-around – lines are evenly distributed in the flex container, with half-size spaces on either end.

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
#box {
  width: 200px;
  height: 200px;
  border: 3px solid #333;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.one, .two, .three, .four, .five {
  width: 50px;
  height: 50px;
}
</style>
</head>
<body>

<div id="box">
  <div class="one" style="background-color:#264653;"></div>
  <div class="two" style="background-color:#2a9d8f;"></div>
  <div class="three" style="background-color:#e9c46a;"></div>
  <div class="four" style="background-color:#f4a261;"></div>
 <div class="five" style="background-color:#e76f51;"></div>
</div>

</body>
</html>

Output:


Note: Internet Explorer 10 and earlier versions do not support the align-content property!

Enjoy coding!