Forem: CodingFlicks

Progress Bar with Percentage

CodingFlicks — Thu, 14 Dec 2023 15:14:48 +0000

A visual element used to represent the completion status of any task on a website is called a progress bar. This visual element provides a visual signal to the user of the ongoing process. The examples of Completion status of a task include loading a webpage, uploading a file, etc. A progress bar can be dynamically presented to the user. In this blog post, we will design a simple static progress bar with percentages using HTML and CSS. The video tutorial below shows the process of creating this snippet. Watch the video before collecting the source code.

Our today's snippet is an effective visual element to demonstrate proficiency levels in various technologies or skills. This element can be used to showcase a person's skills on any personal portfolio website. For example, indicating HTML proficiency as 98%, CSS as 95%, and JavaScript as 90% provides website visitors with a quick visual summary of any developer's skill set.

You May Also Like:

The percentage values used here provide a summary of a person's strengths. Besides, the static progress bar with a percentage element is very important due to the Visual Appeal, User Engagement, Transparency, Professionalism, Efficiency, etc. of a website. Since this website element helps manage visitors' expectations and reduces uncertainty, you can keep it in your next website design.

<!DOCTYPE html>
<html lang="en">
     <!-- codingflicks.com -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Progress bar with percentage</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="progress-container" data-percentage='70'>
        <div class="progress"></div>
        <div class="percentage">75%</div>
    </div>
</body>
</html>

* {
    box-sizing: border-box;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    min-height: 100vh;
    margin: 0;
    background: deepskyblue;
}
.progress-container {
    box-shadow: 0 4px 5px rgb(0, 0, 0, 0.1)
}
.progress-container, .progress {
    background-color: #ffffff;
    border-radius: 50px;
    position: relative;
    height: 14px;
    width: 500px;
}
.progress {
    background-color: #212121;
    width: 75%;
    transition: width 0.4s linear;
}
.percentage {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 5px rgb(0, 0, 0, 0.5);
    color: #212121;
    font-size: 15px;
    padding: 4px;
    position: absolute;
    top: 25px;
    left: 75%;
    transform: translateX(-50%);
    width: 40px;
    text-align: center;
    transition: left 0.4s linear;
}
.percentage::after {
    background-color: #fff;
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    height: 15px;
    width: 15px;
    z-index: -1;
}

For the Original Post CLICK HERE

Simple CSS Loader Spinner

CodingFlicks — Fri, 24 Nov 2023 08:23:35 +0000

The animations we see before loading the page content of a website are called website loader animations. Loader animations are especially helpful in situations where a webpage may take a few moments to load due to large files or videos. Today we will design a simple loader spinner with only HTML and CSS. Below is the video tutorial to make this loader spinner.

Loader animation is an important part of the website design process because it improves the overall user experience. A user can understand that the page is not broken or unresponsive through the loader animation. Due to the content of the website, sometimes the website takes time to load. Users are more likely to tolerate waiting if they have an attractive and engaging visual indication that progress is being made.

You May Also Like:

A visually appealing loader animation can reduce the frustration of website loading times and make waiting times more tolerable. A loading spinner, we designed here is also a loader of many kinds of loaders we use in the web design process. This loading spinner is basically a circular type and this animated graphic keeps spinning while the webpage is loading.

<!DOCTYPE html>
<html lang="en">
  <!-- codingflicks.com -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pure CSS Loader Spinner</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="wrapper">
    <div class="loader"></div>
  </div>
</body>
</html>

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrapper{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #212121;
}
.loader{
  width: 250px;
  height: 250px;
  border: 20px solid #14e2b6;
  border-top-color: transparent;
  border-radius: 50%;
  animation: animate 1s linear infinite;
}
@keyframes animate{
    to{
      transform: rotate(-360deg);
    }
}

For the Original Post CLICK HERE

HTML CSS Reflection Effect

CodingFlicks — Fri, 24 Nov 2023 08:04:39 +0000

Today we will share with you a CSS Tricks snippet of the Realistic Image Reflection effect made with HTML CSS. Realistic Image Reflection or HTML CSS Mirror Effect is a web design and development trick that simulates the appearance of an image reflected on a surface. Much like a reflection, you might see in water or on a shiny floor. Those of you learning CSS will learn about a new property from this snippet. A video tutorial below shows how to create this snippet.

Many use 'transform' and 'gradient' to position and style the reflected image to create image reflection effects with HTML CSS. But here we will use a CSS property called 'webkit-box-reflect'. Please note that this CSS property is not supported by some browsers such as Firefox, Internet Explorer, and Opera Mini. Beginners experiment with various properties of CSS in the beginning with the purpose of learning.

You May Also Like:

This snippet is made for this purpose only. This kind of reflection effect makes a website's images very visually appealing. This technique can be used to create the illusion that the website images are sitting on a reflective surface. It's a creative use of CSS and this technique can be used to present a website's image more dynamically.

<!DOCTYPE html>
<!-- codingflicks.com -->
<html>
<head>
    <title>Realistic Image Reflection using CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="image">
          <img src="img/1.jpg" alt="">
        </div>
        <div class="image">
          <img src="img/2.jpg" alt="">
        </div>
        <div class="image">
          <img src="img/3.jpg" alt="">
        </div>
      </div>
</body>
</html>

body {
    background: #000;
}
.container {
    width: 80%;
    margin: 10% auto;
    display: flex;
    justify-content: space-between;
}
.image {
    width: 30%;
    height: 200px;
}
.image img {
    width: 100%;
    -webkit-box-reflect: below 4px linear-gradient(transparent 25%, rgba(0, 0, 0, 0.35));
}

For the Original Post CLICK HERE

Contact Form Input Label Animation

CodingFlicks — Thu, 16 Nov 2023 04:37:22 +0000

A contact form design is a website component through which a user can contact the website owner. In this contact form user enters his email, name, and query or message and clicks on the send button. After that, the message reaches the website owner. The website owner reads the message and replies to that user. This contact form creates a communication bridge between the user and the website owner. Today we will create a simple contact form design whose input labels will animate. Only HTML and CSS were used to create this snippet. Below is a video tutorial showing the entire process of creating this CSS form.

Contact Us page design is as important as any other page design in the website design process. Contact forms play an important role in facilitating the data collection process. This website component makes it much easier to reach website owners, ask questions, provide feedback, or request services. Adding animation to form design makes it more visually appealing and engaging. Animation plays an important role in attracting users' attention and adding a touch of professionalism and modernity to the contact form design.

You May Also Like:

A popular animation technique in form design is input label animation, where form labels move or transform as the user interacts with the corresponding input field. HTML and CSS are sufficient to implement such input label animations. CSS animations and transitions can be used to create desired effects on contact forms. DOWNLOAD CODE

CSS Gradient Border Animation

CodingFlicks — Fri, 03 Nov 2023 04:07:11 +0000

CSS Gradient Border Animation Animation is a type of visually appealing effect that is used in various elements of the website such as buttons, cards, etc. Animating the border of an element using CSS gradients can not only look good but also increase user engagement. Today we will share with you a snippet about gradient border animation. The video tutorial below shows the step-by-step process of making it.

The gradient border CSS concept provides an eye-catching design when hovering over an element. This gradient border animation looks good on web applications or websites that are usually of dark-themed type. It is now common to see gradients used to animate the borders of HTML elements. There are many famous websites that use CSS gradient border animation. Some of them are Google, Twitter, Dribble, Behance, Codepen, etc.

You May Also Like:

CSS Full Screen Overlay Navigation
Background Animation HTML CSS and Particles JS
Responsive Bootstrap Vertical Tab Design

A website that has interactive buttons can use gradient border animation on hover or click events. This will undoubtedly boost the website's user engagement. It plays an important role in drawing the attention of users and increasing conversions. Apart from button elements, this gradient border animation can also be used in Dividers, Separators, Loading Indicators, or Service boxes.

The use of CSS gradient border animation has various advantages. Improved Visual Appeal, Engagement, Interactivity, Attention, and Focus are a few of them. Using CSS Gradient Properties, CSS Transitions, and Keyframes we can create dynamic gradient border effects without the need for JavaScript. This example of a CSS animation is cross-browser compatible, meaning it works with most current browsers.

<!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->
<head>
    <title>Gradient Border Animation</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <div class="wrapper">
        <div class="box"></div>
    </div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: #212121;
}
.wrapper {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 400px;
    width: 350px;
}
.box {
    height: 400px;
    width: 350px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.box:before {
    content: "";
    height: 150%;
    width: 150%;
    position: absolute;
    left: -25%;
    top: -25%;
    animation: animate 2s infinite linear;
    background-image: conic-gradient(red, orange, yellow, green, blue, indigo, violet);
}
.box::after {
    position: absolute;
    content: "";
    background-color: #212121;
    height: 96%;
    width: 96%;
    top: 2%;
    left: 2%;
    border-radius: 5px;
}
@keyframes animate {
    100% {
        transform: rotate(-360deg);
    }
}

For More CLICK HERE

Responsive Neumorphism Service Section

CodingFlicks — Fri, 03 Nov 2023 03:43:23 +0000

The Services section is made up of information about the services or products that a website owner or organization provides. Suppose you are running a Frontend Development Online Course website. In the website services section, you just need to inform your visitors about the services you are providing, isn't it? Otherwise, they will not know about your frontend development services and you will lose customers. Today we will design a simple responsive services section using the CSS Flexbox grid system. In this snippet, we will use a dark neomorphic design technique and CSS animation for the hover effect. The video tutorial below will show you the process of making this snippet.

We hope you have seen the video tutorial about the Responsive Neumorphism Service Section. One of the vital components of a website is the service section or service page. Because this section or page serves the main purpose of a website.

Creative Image Hover Overlay Effect

CodingFlicks — Sat, 27 Mar 2021 14:03:30 +0000

Image hover effects create an opportunity to add interactivity to elements on a website without slowing it down. Every website now nowadays implementing creative hover effects in their webpage to make it looks even better than others. This Snippet is based on a creative CSS image hover effect made with only HTML and CSS. in this animation when we will hover over the image, the text will appear from the back image slide is attached to the hinge or so. Download the Source Code

Glowing Social Media Icons

CodingFlicks — Wed, 25 Nov 2020 07:16:38 +0000

The widget of Social Media is something to display icons of their social networks and connections and other subscription options to show icons on those social media sites. This blog will make a simple glowing animation on social media icons using HTML and CSS. This kind of glowing CSS animation is stylish and makes a widget looks beautiful. Download the Source Code

Pure CSS Page Transition Effect

CodingFlicks — Sun, 22 Nov 2020 04:52:04 +0000

The transition effect of page in CSS is the transition between sections or pages used for a given website. It creates a good browsing experience among the users. When applied correctly, they can provide a sense of liveliness and help significantly with navigation. Today, I am sharing the code of a snippet based on how to create a pure CSS page transition effect. Only plain HTML and CSS were used while doing this project. First, I made a simple navbar, and then I used the target attribute and the CSS transform property to create this simple page transition effect. Download the Source Code

How to make CSS Zigzag borders

CodingFlicks — Sun, 15 Nov 2020 17:33:24 +0000

Hello Friends, today, we are creating a snippet based on How to make a Zigzag border using HTML and CSS. Here we will make a CSS zigzag vertical edge for the banner image. We often see websites using curved or different shaped frames to make their website look aesthetic and slightly different from the traditional website. Zigzag borders are often used for the banner image or the other sections like services, portfolios, blogs, etc.Download the Source Code

Expanding Search Bar using HTML CSS JQuery

CodingFlicks — Fri, 13 Nov 2020 04:54:32 +0000

Hello Friends, Today, I share a project on expanding search bar animation using HTML, CSS, and jquery. The search box is one of the standard features of any website nowadays. search bars perform as the gateway of the contents available on your webpage. Using this, the user-friendliness of the website increases. Today we are making a search box animation where if a user clicks on the search icon, the search box will expand but closes again when we click on the same icon.Download the Code

Homepage Template Bootstrap

CodingFlicks — Wed, 11 Nov 2020 13:36:44 +0000

In this blog, I am sharing another bootstrap-based snippet on creating a homepage template using bootstrap. I am using animate CSS to make an excellent text animation while bootstrap carousel works. I used a static background image for the carousel so that only the text animate.Download the Source Code