how to Archives - csshint - A designer hub

How to create Social Media Icons using HTML CSS ?

admin — Sat, 01 Oct 2022 15:29:08 +0000

Today In this article, we are learning how to Create Social Media icons using HTML And Css.

Note: You can add Social Media icons as images( SVG, PNG ) or Font icon like, bootstrap icon, material icon and Font awesome icon. In this article, i will show you how to crate social media icon using font awesome. let’s started.

Step 1: first we need to add (Font Awesome Icons) the following CDN link insidesection.

Step 2: Add HTML:










Social Media Buttons Examples

Step 3: Add CSS:

Output:

The post How to create Social Media Icons using HTML CSS ? appeared first on csshint - A designer hub.

How to create a form in html

admin — Sat, 08 Aug 2020 04:25:52 +0000

In this post we will learn How to create a Simple HTML/CSS Contact Form with minimal styling to be used on websites. This basic form Designed by Tania Rascia.

Demo : HTML CSS Contact Form

HTML

[code language=”html”]

[/code]

CSS

[code language=”css”]
/* Forms */

[type=text],
[type=email],
[type=url],
select,
textarea {
display: block;
padding: .5rem;
background: transparent;
vertical-align: middle;
width: 100%;
max-width: 100%;
border: 1px solid #cdcdcd;
border-radius: 4px;
font-size: .95rem;
}

[type=text]:focus,
[type=email]:focus,
[type=url]:focus,
select:focus,
textarea:focus {
outline: none;
border: 1px solid #1E6BD6;
}

select {
-webkit-appearance: none;
-moz-appearance: none;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAJCAYAAAA/33wPAAAAvklEQVQoFY2QMQqEMBBFv7ERa/EMXkGw11K8QbDXzuN4BHv7QO6ifUgj7v4UAdlVM8Uwf+b9YZJISnlqrfEUZVlinucnBGKaJgghbiHOyLyFKIoCbdvecpyReYvo/Ma2bajrGtbaC58kCdZ1RZ7nl/4/4d5EsO/7nzl7IUtodBexMMagaRrs+06JLMvcNWmaOv2W/C/TMAyD58dxROgSmvxFFMdxoOs6lliWBXEcuzokXRbRoJRyvqqqQvye+QDMDz1D6yuj9wAAAABJRU5ErkJggg==) 100% no-repeat;
line-height: 1
}

label {
font-weight: 600;
font-size: .9rem;
display: block;
margin: .5rem 0;
}

/* Other */

* { box-sizing: border-box; }

html {
-webkit-font-smoothing: antialiased;
padding: 1rem;
}

.container {
max-width: 600px;
margin: 0 auto;
padding: 0 1rem;
}

/* Button */

[type=submit] {
display: inline-block;
vertical-align: middle;
white-space: nowrap;
cursor: pointer;
margin: .25rem 0;
padding: .5rem 1rem;
border: 1px solid #1E6BD6;
border-radius: 18px;
background: #1E6BD6;
color: white;
font-weight: 600;
text-decoration: none;
font-family: sans-serif;
font-size: .95rem;
}
[/code]

html forms

See the Pen Forms by Tania Rascia
(@taniarascia) on CodePen.

The post How to create a form in html appeared first on csshint - A designer hub.

How to Create Stretch And Expand Underline On Click Navigation

admin — Sat, 25 Jul 2020 06:29:35 +0000

hey guys today we are going to show you How to Create Stretch And Expand Underline On Click Navigation using css and js.

Expand Underline On Click Navigation

Code By: Aaron Iker from Codepen

1. Html

[code language=”html”]

[/code]

2. CSS/Sass

[code language=”css”]
*
box-sizing: border-box

body
background: #1A1E23
font-family: ‘Lato’, sans-serif
-webkit-font-smoothing: antialiased

nav
position: relative
padding-bottom: 12px
.line
height: 2px
position: absolute
bottom: 0
margin: 10px 0 0 0
background: #FF1847
ul
padding: 0
margin: 0
list-style: none
display: flex
li
margin: 0 40px 0 0
opacity: .4
transition: all 0.4s ease
&:hover
opacity: .7
&.active
opacity: 1
&:last-child
margin-right: 0
a
text-decoration: none
color: #fff
text-transform: uppercase
display: block
font-weight: 600
letter-spacing: .2em
font-size: 14px

//Center
body
display: flex
justify-content: center
align-items: center
min-height: 100vh

[/code]

3. Js

[code language=”js”]
var nav = $(‘nav’);
var line = $(‘

’).addClass(‘line’);

line.appendTo(nav);

var active = nav.find(‘.active’);
var pos = 0;
var wid = 0;

if(active.length) {
pos = active.position().left;
wid = active.width();
line.css({
left: pos,
width: wid
});
}

nav.find(‘ul li a’).click(function(e) {
e.preventDefault();
if(!$(this).parent().hasClass(‘active’) && !nav.hasClass(‘animate’)) {

nav.addClass(‘animate’);

var _this = $(this);

nav.find(‘ul li’).removeClass(‘active’);

var position = _this.parent().position();
var width = _this.parent().width();

if(position.left >= pos) {
line.animate({
width: ((position.left – pos) + width)
}, 300, function() {
line.animate({
width: width,
left: position.left
}, 150, function() {
nav.removeClass(‘animate’);
});
_this.parent().addClass(‘active’);
});
} else {
line.animate({
left: position.left,
width: ((pos – position.left) + wid)
}, 300, function() {
line.animate({
width: width
}, 150, function() {
nav.removeClass(‘animate’);
});
_this.parent().addClass(‘active’);
});
}

pos = position.left;
wid = width;
}
});

[/code]

Fluid tab active state

See the Pen Fluid tab active state by Aaron Iker
(@aaroniker) on CodePen.

The post How to Create Stretch And Expand Underline On Click Navigation appeared first on csshint - A designer hub.

Animated Menu Using only CSS Pseudo Elements

admin — Sun, 29 Apr 2018 08:19:09 +0000

In this post we are going to show you how to create a Animated Menu Using only CSS Pseudo Elements. these effects can make your site feel much more attaractive. you can use this effects in your projects.

The structure of markup is very simple. Create a navigation ul li that will have our all the list.

<div class="nav">
 <ul>
   <li class="home"> <a href="#" data-glitch-text="Home"> Home </a></li>
   <li class="tutorials"> <a href="#" data-glitch-text="tutorials"> tutorials </a></li>
   <li class="About"> <a href="#" data-glitch-text="About"> About </a></li>
   <li class="Newsletter"> <a href="#" data-glitch-text="Newsletter"> Newsletter </a></li>
   <li class="Contact"> <a href="#" data-glitch-text="Contact"> Contact </a></li>  
 </ul> 
</div>

After creating our markup we’re going to set our style.
We set the general rules for our class and then we are going to add a special class with the desired effect styles.


/*--first include your font--*/  
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');

*{
    margin:0px;
    padding:0px;
}

.nav ul {
      list-style:none;
      background-color:#000;
      text-align:center;
      padding:0px;
      margin:0px;
}

.nav ul li {
      display:inline-block;
      font-size:0px;
}

.nav ul li a {
      display:block;
      font-size:18px;
      padding:20px;
      font-weight:bold;
      color:#fff;
      font-family:'Open Sans', sans-serif;
      text-decoration:none;
      position:relative;
      transition:color .35s ease, background-color .35s ease;
      z-index:3;
}

.nav ul li a:before,
.nav ul li a:after {
      display:none;
      content:attr(data-glitch-text);
      position:absolute;
      top:20px;
      left:0;
      height:100%;
      width:100%;
      opacity:.8;
    }

.nav ul li a::before{
      color:#0ff;
      z-index:-1;
    }

.nav ul li a::after{
      color:#f0f;
      z-index:-2;
    }

.nav ul li a:hover::before,
.nav ul li a:active::before,
.nav ul li a:focus::before{
      display:block;
      animation:glitch 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
    }

.nav ul li a:hover::after,
.nav ul li a:active::after,
.nav ul li a:focus::after{
      display:block;
      animation:glitch 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
    }

@keyframes glitch{
      
0%  {-webkit-transform:translate(0);
      transform:translate(0);
    }

20%  {-webkit-transform:translate(-.15rem, .15rem);
      transform:translate(-.15rem, .15rem);
     }

40%  {-webkit-transform:translate(-.15rem, .15rem);
      transform:translate(-.15rem, .15rem);
     }

60%  {-webkit-transform:translate(.15rem, .15rem);
      transform:translate(.15rem, .15rem)
     }

80%  {-webkit-transform:translate(5px, -5px);
      transform:translate(5px, -5px)
     }

to  {-webkit-transform:translate(0);
      transform:translate(0)
     }
}

And now we can see our menu effects.

I hope that you liked this simple animated menu effects. Thanks and keep visting

The post Animated Menu Using only CSS Pseudo Elements appeared first on csshint - A designer hub.

How to Write Eye-Catchy Blog Post Titles.

admin — Sun, 29 Apr 2018 08:10:04 +0000

This article shares some tips and tricks on Write Eye-Catchy Blog Post Titles because Your headline is your first chance, and sometimes your only chance, to catch a reader’s attention. It is the first thing they will see when your blog post comes up in Google search list.

1.Apply these tips to get an effective post title

According to a recent survey it is discovered that over 2 million blog posts are published each day, blogging has become a trend to gather information about various products and services prevailing online. But who wants their blog to appear unattractive and uncatchy, as it is well said that it’s one thing to write content but different thing to drive people into reading that content.

Here’s where the titles comes into play- titles are what sell the content. Setting it right each time isn’t hard to crack after you know what to put in there. Effective post titles apart from being cherry on the cake also triggers people into clicking it. By the time you must be wondering why these titles are so important? Does it really have to do something with the content? The answer to all these questions is a big Yes. Have a look at these points:

Helps in improving traffic from search engines
Engage readers
RSS feeds
Establish links from other bloggers
curveballs and controversy

Now you know the blessings off having good and effective titles so, luckily, we came up with few tips and tricks for writing effective post titles. So let’s dig into it.

2.Keyword research would be a great startup

keyword research is extremely crucial factor in determining your blog post. By making a note of some keywords that customers are usually targeting would provide a right key to your blog. Accurate usage of keywords would be a great hit. However, keyword stuffing should be avoided as the users already know what your blog post is up to and flagrant keyword stuffing will just put a user off for good. Keyword usage should be precise to maintain good readability.

3.Stay accurate-

it is always suggested that title needs to appropriately reflect the content that follows. Accuracy is vital when it comes to finesse a title, because it sets clear expectations for your readers. If you set it high in your title you would probably end with readers’ trust. Be careful not to write blindsiding titles that everyone wishes to read but has no relevant content. You would not prefer to send your readers back with a terrible experience therefore, setting it right each time is what all you need.

4.Number would be a hit to add on-

adding numbers by a way of suffix or prefix makes a title eloquent and instantly captures the reader’s attention. Even popular bloggers make into use numbers because they entice people to click. This would transform the blog post title making it all the way more engaging.

5.Trigger words would be great to sound-

even if you can’t place a number in your title or even if your post title is not demanding so, then here’s where trigger words come into use. Words like “How”, “Why” and “What” would evoke the curiosity in the reader making them to read more and more. I know what you might be wondering now? Do I really need to add these trigger words? Yes, off course the better the headline, the better are the chances of search traffic and your odds of beating the averages.

6.Keep it short and precise-

well, there is no right limit of characters- the key to this lies in the fact that it depends what your goals are and most importantly where your headline would appear. If you are seeking to rank your blog, then it’s always a good idea to keep it below Google’s display limit of 70 characters so it doesn’t get cut off in search engine results. As for Facebook, headlines between12-14 words received the most likes and shares. Try to find out appropriate titles to make it easily digestible for the readers.

7.Seek advice from others-

following the classic idea of learning from your rivals, then why not seek advice from others and see what they are actually writing. I am sure you would have gone through similar articles before starting up. Ask yourself which titles would you prefer and give priority, which angles did they use? It won’t take a long to come up with great titles but do not steal their ideas rather try to create your own, push yourself into the world of imagination and jot down whatever comes to your mind.

I hope this article would give the best title to your blog’s post. If you have more tips do not feel shy to leave them in comment box. Thank you. Keep visiting.

The post How to Write Eye-Catchy Blog Post Titles. appeared first on csshint - A designer hub.

how to create social media icons with hover effects

admin — Sun, 29 Apr 2018 07:59:55 +0000

In this post we are going to show how to how to create social media icons with hover effects with transition effect. these effects can make your site feel much more attaractive. you can use this effects in your projects.

The structure of markup is very simple and intuitive. Create a container that will have our all the social icons list.

<div class="container">
 <ul class="social-icons">
  <li> <a href="#"><i class="fa fa-facebook"></i></a></li>
  <li> <a href="#"><i class="fa fa-twitter"></i></a></li>
  <li> <a href="#"><i class="fa fa-linkedin"></i></a></li>
  <li> <a href="#"><i class="fa fa-youtube"></i></a></li>
  <li> <a href="#"><i class="fa fa-google"></i></a></li>
 </ul> 
</div>

After creating our markup we’re going to set our style.
We set the general rules for our class and then we are going to add a special class with the desired effect styles.


/*--first include font awesome cdn file in header tag --*/  
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
body{
      background:#504496;
}
.social-icons {
      margin:50px auto;
      padding:0px;
      text-align:center;
      width:100%;
}
.social-icons li {
      Display:inline-block;
      margin:10px;
     }
.social-icons li a {
      color:#fff;
      display:inline-block;
      font-size:25px;
      height:50px;
      width:50px;
      text-decoration:none;
      position:relative;
      margin-bottom:20px;
      font-family:'FontAwesome';
      transition:all 0.5s ease;
     pointer-events:auto;
}
.social-icons li a i {
      line-height:50px;
}
.social-icons li a:hover  {
      color:#3a5ba0;
      background-color:#fff;
      -webkit-border-radius:25px;
      -moz-border-radius:25px;
      border-radius: 25px;
}

And now we’ll look our social icons effects.

I hope that you liked this social icons effects. Thanks and keep visting

how to create social media icons with hover effects , Learn how to style social media buttons with CSS , html code for social media buttons to website

The post how to create social media icons with hover effects appeared first on csshint - A designer hub.

how to create triangles with CSS

admin — Sat, 28 Apr 2018 18:21:46 +0000

hello guys today we are going to create traingles using css. we’ve often seen triangles everywhere: like tooltips, dropdowns and many more. There are some different ways to build a triangle for your web designs. you can create triangles via :before and :after pseudo-elements. but in this article we will use just one HTML element and some simple styles that makes it much easier to use and maintain.

so let’s start How to quickly and easily create 100% pure CSS triangles with border stroke and color fill. No images, no font-icons and no JavaScript needed. and i really like this features of css3 because it reduces the use of images in website and allows to crete diffrent shapes.

The Html

You can make them with a single div with .

<div class="triangle-up"></div>
<div class="triangle-top-right"></div>
<div class="triangle-right"></div>
<div class="triangle-bottom-Right"></div>
<div class="triangle-Bottom"></div>
<div class="triangle-bottom-left"></div> 
<div class="triangle-left"></div>            
<div class="triangle-top-left"></div>

And here’s some common CSS to get us going:

.triangle-up {
      width:0;
      height:0;
      border-style:solid;
      border-width:0 50px 100px 50px;
      border-color:transparent transparent #008000 transparent;
}
.triangle-top-right {
      width:0;
      height:0;
      border-style:solid;
      border-width: 0 100px 100px 0;
      border-color:transparent #007bff transparent transparent;
}
.triangle-right {
      width:0;
      height:0;
      border-style:solid;
      border-width:50px 0 50px 100px;
      border-color:transparent transparent transparent #000;
}
.triangle-bottom-Right {
      width:0;
      height:0;
      border-style:solid;
      border-width:0 0 100px 100px;
      border-color:transparent transparent #E90325 transparent;
}
.triangle-Bottom {
      width:0;
      height:0;
      border-style:solid;
      border-width:100px 50px 0 50px;
      border-color:#50B704 transparent transparent transparent;
}
.triangle-bottom-left {
      width:0;
      height:0;
      border-style:solid;
      border-width:100px 0 0 100px;
      border-color: transparent transparent transparent #A400A4;
}
.triangle-left {
      width:0;
      height:0;
      border-style:solid;
      border-width:50px 100px 50px 0;
      border-color:transparent #C60 transparent transparent;
}
.triangle-top-left {
      width:0;
      height:0;
      border-style:solid;
      border-width:100px 100px 0 0;
      border-color:#FFFF04 transparent transparent transparent;
}

Example

CSS arrows are a great alternative for images. No extra server requests, no bandwidth consumer and is easy to do.
I hope you will enjoy this article.
Happy coding.

how to create triangles with CSS. css arrow shape , CSS triangle generator – A generator for pure CSS triangle. css triangle before, css triangle after

The post how to create triangles with CSS appeared first on csshint - A designer hub.

how to create 3d text Effect Using CSS3

admin — Fri, 27 Apr 2018 17:47:19 +0000

3d text Effect Using CSS3: The css3 properties gives Designers a wonderful chance to magnify their designs in quick and easy way. CSS3 helps to give style to design including various effects in text or typography. so in this tutorials i am going to show you how to create 3d text using to text shadow properties that is supportd by most of the browser as well. you can copy and paste for your own work.

let’s start html with simple h1 tag. you can use class, id and what ever you want.

<h1>Hello Readers</h1>

Here is some fairly simple CSS for ‘inset’ shadow –

/*import custom font*/
@import url('https://fonts.googleapis.com/css?family=Pacifico');

body{
      background:#a4d914;
}

h1 {
      color:#fff;
      font-size:100px;
      font-family:'Pacifico', cursive;
      Text-align:center;
      Text-shadow :0 1px 0 #ccc,
                  0 2px 0 #c9c9c9,
                  0 4px 0 #b9b9b9,
                  0 5px 0 #aaa,
                  0 6px 1px rgba(0,0,0,.1),
                  0 0 5px rgba(0,0,0,.1),
                  0 1px 3px rgba(0,0,0,.3),
                  0 3px 5px rgba(0,0,0,.2),
                  0 5px 10px rgba(0,0,0,.25),
                  0 10px 10px rgba(0,0,0,.2),
                  0 20px 20px rgba(0,0,0,.15);
}

Here’s the result of this code

I hope you will enjoy this article.
Happy coding

how to create 3D Text Effect Using CSS3. css text effects , Buttons · Textfields · Text effects · Shapes · Gradient patterns

The post how to create 3d text Effect Using CSS3 appeared first on csshint - A designer hub.