Categories
CSS HTML Web development

CSS Coffee Cup

 CSS Coffee Cup

To create the CSS Coffee Cup follow the steps below and watch the video tutorial:

Demo:

*to see the CSS Coffee Cup on the website click here.

Step1.

Add HTML

<div class="coffeecup">
  <div class="cup"></div>
  <div class="shadow"></div>
  <div class="label"></div>
  <div class="cover"></div>
  <div class="top"></div>
  <div class="steam"></div>
  <div class="logo"></div>
  <div class="eyes"></div>
</div>

Step2.

Add CSS

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

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

.coffeecup {
  position: relative;
}

Style the cup:

.coffeecup:before {
  content:"";
  position: absolute;
  width: 200px;
  height: 10px;
  border-radius:10px;
  background-color: #d4a373;
  top:191px;
  left:-65px;
}

.cup {
  position: relative;
  height:0;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 150px solid #fefae0;
  width: 120px;
}

.cup:before {
  content:"";
  position: absolute;
  background-color: #fefae0;
  width: 120px;
  height: 50px;
  border-radius: 0 0 15px 15px;
  top:-5px;
  left:0;
}

.cup:after {
  content:"";
  position: absolute;
  border-radius: 0 0 0 15px;
  background-color: rgba(0,0,0,0.09);
  width: 40px;
  height: 40px;
  top:5px;
}

.shadow {
  position: absolute;
  height:0;
  border-right: 0px solid transparent;
  border-left: 2px solid transparent;
  border-top: 40px solid rgba(0,0,0,0.09);
  width: 40px;
  top:10px;
  left:0;
}

.label {
  position: absolute;
  height:0;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-top: 130px solid #e9edc9;
  width: 125px;
  top:35px;
  left:-4px;
}

.label:before {
  content:"";
  position: absolute;
  height:0;
  border-right: 0px solid transparent;
  border-left: 7px solid transparent;
  border-top: 130px solid #ccd5ae;
  width: 45px;
  top:-130px;
  left:-7px;
}

.label:after {
  content:"";
  position: absolute;
  width: 120px;
  background-color: rgba(0,0,0,0.09);
  height: 5px;
  left:2px;
}

.cover {
  position: absolute;
  width: 150px;
  height: 25px;
  background-color: #fefae0;
  top:-15px;
  left:-10px;
  border-radius:5px;
}

.cover:before {
  content:"";
  position: absolute;
  background-color: rgba(0,0,0,0.09);
  width:130px;
  height:5px;
  top:25px;
  left:10px;
}

.cover:after {
  content:"";
  position: absolute;
  background-color: rgba(0,0,0,0.09);
  width: 47px;
  height: 25px;
  border-radius: 5px 0 0 5px;
}

.top {
  position: absolute;
  background-color: #fefae0;
  width: 130px;
  height: 20px;
  border-radius: 25px 25px 0 0;
  left:0;
  top:-35px;
}

.top:before {
  content:"";
  position: absolute;
  background-color: rgba(0,0,0,0.09);
  border-radius: 25px 0 0 0;
  width:34px;
  height: 20px;
}
CSS Coffee Cup

Add the steam:

.top:after {
  content:"";
  position: absolute;
  background-color: rgba(255, 255, 255,0.5);
  border-radius:20px;
  height: 20px;
  width: 40px;
  top:-40px;
  left:150px;
  box-shadow: -20px -80px rgba(255, 255, 255,0.5), -170px -40px rgba(255, 255, 255,0.5);
}

.steam {
  position: absolute;
  width: 70px;
  height: 20px;
  background-color: rgba(255, 255, 255,0.5);
  border-radius:20px;
  top:-55px;
  left:70px;
  box-shadow: 0 -20px rgba(255, 255, 255,0.5), 10px -40px rgba(255, 255, 255,0.5), 0 -60px rgba(255, 255, 255,0.5), -25px -80px rgba(255, 255, 255,0.5);
}

.steam:before {
  content:"";
  position: absolute;
  width: 70px;
  height: 20px;
  background-color: #faedcd;
  border-radius:20px;
  left:-50px;
  box-shadow: 85px 0 #faedcd, 100px -40px #faedcd, 18px -40px #faedcd, 0px -80px #faedcd, 82px -80px #faedcd;
}

.steam:after {
  content:"";
  position: absolute;
  border-radius: 20px;
  width: 110px;
  height: 20px;
  background-color: rgba(255, 255, 255,0.5);
  top:-100px;
  left:-60px;
}
CSS Coffee take away

Add the logo:

.logo {
  position: absolute;
  overflow: hidden;
  background-color: #333;
  width: 40px;
  height: 20px;
  border-radius: 0 0 50px 50px;
  top:100px;
  left:75px;
}

.logo:before {
  content:"";
  position: absolute;
  background-color: #a4161a;
  width:30px;
  height: 20px;
  border-radius:50%;
  top:7px;
  left:2px;
}

.eyes {
  position: absolute;
}

.eyes:before, .eyes:after {
  content:"";
  position: absolute;
  width:18px;
  height: 18px;
  border-right: 5px solid #333;
  border-top: 5px solid #333;
  border-bottom: 5px solid transparent;
  border-left: 5px solid transparent;
  border-radius:100px;
  transform: rotate(-45deg);
  top:-70px;
}

.eyes:before {
  left:95px;
}

.eyes:after {
  left:65px;
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Coffee Express Animation

CSS Coffee To Go

CSS Steaming Coffee

Categories
HTML Web development

HTML contenteditable Attribute

HTML contenteditable Attribute

The HTML contenteditable attribute defines whether the content of an element is editable or not.

Syntax:

<element contenteditable="true|false"> 

true – defines that the element is editable.

false – defines that the element isn’t editable.

Example:

<!DOCTYPE html>
<html>
<body>

<h3 contenteditable="true">This is a heading. It is editable. You can change this text.</h3>

</body>
</html>

Output:

This is a heading. It is editable. You can change this text.


Enjoy coding!

Read also:

HTML Attributes

HTML Basics

Categories
HTML Web development

HTML class Attribute

HTML class Attribute

The HTML class attribute defines one or more class names for an element.

The HTML class attribute is mainly used to point to a class in a style sheet. However, the HTML class attribute can also be used by JavaScript (HTML DOM) to make changes to HTML elements with a defined class.

Syntax:

<element class="classname"> 

classname – defines one or more class names for an element.

Example1:

Add classes to one HTML element:

<!DOCTYPE html>
<html>
<head>
<style>
h3.first-class {
  color: #9b2226;
}

.second-class{
  background-color: #e9d8a6;
}
</style>
</head>
<body>

<h3 class="first-class second-class">This is a heading.</h3>
<p>This is a paragraph.</p>

</body>
</html>

Output:

This is a heading.

This is a paragraph.


Example2:

Using JavaScript to add the “add-style” class to an element with id=”example”:

<!DOCTYPE html>
<html>
<head>
<style>
.add-style {
  width: 200px;
  height: 50px;
  background-color: #e9d8a6;
  color: #9b2226;
  font-size: 20px;
}
</style>
</head>
<body>

<button onclick="addstyleFunction()">Try it</button>

<div id="example">
This is a DIV element.
</div>
<br>

<script>
function addstyleFunction() {
  document.getElementById("example").classList.add("add-style");
}
</script>

</body>
</html>

Output:

Click the button to add the “add-style” class to DIV element:



This is a DIV element.


Enjoy coding!

Read also:

HTML Attributes

HTML Classes

HTML id

Categories
JavaScript Web development

JavaScript Math Object

The JavaScript Math object allows you to perform mathematical tasks.

All JavaScript methods/properties of Math can be called by using Math as an object (without creating it).

Example:

<!DOCTYPE html>
<html>
<body>

<p><b>Math.PI returns PI:</b></p>
<p id="piExample"></p>

<p><b>Math.sqrt(16) returns the square root of 16:</b></p>
<p id="sqrtExample"></p>

<script>
var x = Math.PI;
var y = Math.sqrt(10);

document.getElementById("piExample").innerHTML = x;
document.getElementById("sqrtExample").innerHTML = y;
</script>

</body>
</html>

Output:

Math.PI returns PI:

Math.sqrt(16) returns the square root of 16:


Math object properties:

E – the JavaScript E property returns the Euler’s number and the base of natural logarithms (approx. 2.718).

LN2 – the JavaScript LN2 property returns the natural logarithm of 2 (approx. 0.693).

LN10 – the JavaScript LN10 property returns the natural logarithm of 10 (approx. 2.302).

LOG2E – the JavaScript LOG2E property returns the base-2 logarithm of E (approx. 1.442).

LOG10E – the JavaScript LOG10E property returns the base-10 logarithm of E (approx. 0.434).

PI – the JavaScript PI property returns the ratio of a circle’s area to the square of its radius (approx.3.14).

SQRT1_2 – the JavaScript SQRT1_2 property returns the square root of 1/2 (approx. 0.707).

SQRT2 – the JavaScript SQRT2 property returns the square root of 2 (approx. 1.414).

Math Object Methods:

abs(x) – the JavaScript abs() method returns the absolute value of a number.

acos(x) – the JavaScript Math.acos() returns the arccosine of a number as a value between 0 and PI radians.

acosh(x) – the JavaScript Math.acosh() returns the hyperbolic arccosine of a number.

asin(x) – the JavaScript Math.asin() returns the arcsine of a number as a value between -PI/2 and PI/2 radians.

asinh(x) – the JavaScript Math.asinh() returns the hyperbolic arcsine of a number.

atan(x) – the JavaScript Math.atan() returns the arctangent of a number as a value between -PI/2 and PI/2 radians.

atan2(y,x) – the JavaScript Math.atan2() returns the arctangent of the quotient of its arguments, as a numeric value between PI and -PI radians.

atanh(x) – the JavaScript Math.atanh() returns the hyperbolic arctangent of a number.

cbrt(x) – the JavaScript Math.cbrt() returns the cubic root of a number.

ceil(x) – the JavaScript Math.ceil() rounds a number upwards to the nearest integer, and returns the result.

clz32(x) – the JavaScript Math.clz32() returns the number of leading zeros in a 32-bit binary representation of a number.

cos(x) – the JavaScript Math.cos() returns the cosine of a number.

cosh(x) – the JavaScript Math.cosh() returns the hyperbolic cosine of a number.

exp(x) – the JavaScript Math.exp() returns the value of Ex, where E is Euler’s number (approx. 2.7183) and x is the number passed to it.

expm1(x) – The JavaScript Math.expm1() returns the value of Ex minus 1, where E is Euler’s number (approx. 2.7183) and x is the number passed to it.

floor(x) – the JavaScript Math.floor() method rounds a number (downwards) to the nearest integer and returns the result.

fround(x) – the JavaScript Math.fround() returns the nearest (32-bit single precision) float representation of a number.

log(x) – the JavaScript Math.log() returns the natural logarithm (base E) of a number.

log10(x) – the JavaScript Math.log10() returns the base-10 logarithm of a number.

log1p(x) – the JavaScript Math.log1p() returns the natural logarithm (base E) of 1 + a defined number.

log2(x) – the JavaScript Math.log2() returns the base-2 logarithm of a number.

max(x,y,z…) – the JavaScript Math.max() returns the number with the highest value.

min(x,y,z…) – the JavaScript Math.min() method returns the number with the lowest value.

pow(x,y) – the JavaScript Math.pow() returns the value of x to the power of y (xʸ).

random(x) – the JavaScript Math.random() returns a random number from 0 (included) up to but not including 1.

round(x) – the JavaScript Math.round() rounds a number to the nearest integer.

sign(x) – the JavaScript Math.sign() returns whether a number is negative, positive or zero.

sin(x) – the JavaScript Math.sin() returns the sine of a number.

sqrt(x) – the JavaScript Math.sqrt() returns the square root of a number.

tan(x) – the JavaScript Math.tan() returns the tangent of a number.

tanh(x) – the JavaScript Math.tanh() returns the hyperbolic tangent of a number.

trunc(x) – the JavaScript Math.trunc() returns the integer part of a number.

Read also:

JavaScript Introduction

JavaScript HTML DOM

Categories
JavaScript Web development

JavaScript Math.trunc()

JavaScript Math.trunc()

The JavaScript Math.trunc() returns the integer part of a number.

Syntax:

Math.trunc(number)

Note: The JavaScript Math.trunc() won’t round the number up/down to the nearest integer, but simply remove the decimals.

Example:

<!DOCTYPE html>
<html>
<body>

<p id="example"></p>

<script>
document.getElementById("example").innerHTML = Math.trunc(7.57);
</script>

</body>
</html>

Output:

The JavaScript Math.trunc() returns the integer part of a number:


Note: The JavaScript Math.trunc() is not supported in Internet Explorer.

Enjoy coding!

Read also:

JavaScript Math Object

JavaScript Math Object Properties

JavaScript Math.round()

Categories
JavaScript Web development

JavaScript tan() & tanh() Methods

JavaScript tan() & tanh() Methods

The JavaScript Math.tan() returns the tangent of a number.

Syntax:

Math.tan(number)

Example:

<!DOCTYPE html>
<html>
<body>

<p id="example"></p>

<script>
document.getElementById("example").innerHTML = Math.tan(1);
</script>

</body>
</html>

Output:

The JavaScript Math.tan() returns the tangent of a number:


The JavaScript Math.tanh() returns the hyperbolic tangent of a number.

Syntax:

Math.tanh(number)

Example:

<!DOCTYPE html>
<html>
<body>

<p id="example-1"></p>

<script>
document.getElementById("example-1").innerHTML = Math.tanh(1);
</script>

</body>
</html>

Output:

The JavaScript Math.tanh() returns the hyperbolic tangent of a number:


Note: The JavaScript Math.tanh() is not supported in Internet Explorer.

Enjoy coding!

Read also:

JavaScript Math Object

JavaScript atan(), atan2() & atanh() Methods

JavaScript cos() & cosh() Methods

Categories
JavaScript Web development

JavaScript Math.sqrt()

JavaScript Math.sqrt()

The JavaScript Math.sqrt() returns the square root of a number.

Syntax:

Math.sqrt(number)

Note: If a number is negative , NaN is returned.

Example:

<!DOCTYPE html>
<html>
<body>

<p id="example"></p>

<script>
let a = Math.sqrt(0);
let b = Math.sqrt(1);
let c = Math.sqrt(7);
let d = Math.sqrt(45);
let e = Math.sqrt(-9);

document.getElementById("example").innerHTML =
a + "<br>" + b + "<br>" + c + "<br>" + d + "<br>" + e;
</script>

</body>
</html>

Output:

The JavaScript Math.sqrt() returns the square root of a number:


Enjoy coding!

Read also:

JavaScript Math Object

JavaScript Math.cbrt()

JavaScript Math.clz32()

Categories
JavaScript Web development

JavaScript Math.sin()

JavaScript Math.sin()

The JavaScript Math.sin() returns the sine of a number.

Syntax:

Math.sin(number)

Note: JavaScript Math.sin(x) returns a value between -1 and 1, which represents the sine of the parameter x, or NaN if the value is empty.

Example:

<!DOCTYPE html>
<html>
<body>

<p id="example"></p>

<script>
let a = Math.sin(2);
let b = Math.sin(-2);
let c = Math.sin(0);
let d = Math.sin(Math.PI);
let e = Math.sin(Math.PI / 2);
let f = Math.sin();

document.getElementById("example").innerHTML =
a + "<br>" + b + "<br>" + c + "<br>" + d + "<br>" + e + "<br>" + f;
</script>

</body>
</html>

Output:

JavaScript Math.sin() returns the sine of a number:


Enjoy coding!

Read also:

JavaScript Math Object

JavaScript Math.ceil()

JavaScript Math.pow()

Categories
JavaScript Web development

JavaScript Math.sign()

JavaScript Math.sign()

The JavaScript Math.sign() returns whether a number is negative, positive or zero.

Syntax:

Math.sign(number)

Note:

If the number is positive, this method returns 1.
If the number is negative, it returns -1.
If the number is zero, it returns 0.
If the number is not a number, it returns NaN.

Example:

<!DOCTYPE html>
<html>
<body>

<p id="example"></p>

<script>
let a = Math.sign(2);
let b = Math.sign(-2);
let c = Math.sign(0);
let d = Math.sign();
  
document.getElementById("example").innerHTML =
a + "<br>" + b + "<br>" + c + "<br>" + d;
</script>

</body>
</html>

Output:

JavaScript Math.sign() returns whether a number is negative, positive or zero:


Note: JavaScript Math.sign() is not supported in Internet Explorer.

Enjoy coding!

Read also:

JavaScript Math Object

JavaScript Math.floor() Method

JavaScript Math Object Properties

Categories
JavaScript Web development

JavaScript Math.round()

JavaScript Math.round()

The JavaScript Math.round() rounds a number to the nearest integer.

Syntax:

Math.round(number)

Note: 2.49 will be rounded to 2, and 2.5 will be rounded to 3.

Example:

<!DOCTYPE html>
<html>
<body>

<p id="example"></p>

<script>
let a = Math.round(2.77);
let b = Math.round(2.43);
let c = Math.round(2.50);
let d = Math.round(-2.65);
let e = Math.round(-2.23);
let f = Math.round(-2.49);

document.getElementById("example").innerHTML = 
a + "<br>" + b + "<br>" + c + "<br>" + d + "<br>" + e + "<br>" + f;
</script>

</body>
</html>

Output:

Math.round() rounds a number to the nearest integer:

Enjoy coding!

Read also:

JavaScript Math.fround()

JavaScript random() Method

JavaScript Math Object