Unexpected Web: css

Showing posts with label css. Show all posts

How to create a "card" with CSS

By ABONZERTV

Read

0 Comments

Learn How to create a colorful horizontal card with CSS similar to Google Tips page.

DEMO

Source code:

<!- abonzertv.blogspot.com, unexpectedweb.blogspot.com -->

<style>
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.column {
  float: left;
  width: 100%;
  display: block;
  margin-bottom: 16px;
  padding: 0 8px;
}


.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 5px 16px;
}

.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: #424242;
}


.hovdiv.green:hover {
  background-color: #4caf50;
  color:#fdfdfd !important;
}

.hovdiv.red:hover {
  background-color: #f44336;
  color:#fdfdfd !important;
}

.hovdiv.pink:hover {
  background-color: #e91e63;
  color:#fdfdfd !important;
}

.hovdiv.cyen:hover {
  background-color: #009688;
  color:#fdfdfd !important;
}

.hovdiv:hover .title{
   color:#fdfdfd !important;
  }

.description{
color:#757575;
}

.hovdiv:hover .description{
   color:#fdfdfd !important;
}

</style>





<h2>WebTools</h2>
<p>Many Useful web tools developed in JavaScript and other pages.</p>
<br>

  <a href="http://unexpectedweb.blogspot.in/p/home.html">
  <div class="column">
    <div class="card">
      
      <div class="container hovdiv green">
        <h5 class="codetype">PAGE</h5>
        <h3 class="title" style="color:#1b5e20;">About</h3>
        <p class="description"> Blog where you'll find some interesting things around the web, that you never knew existed.</p>
                
      </div>
    </div>
  </div>
  </a>


  <a href="http://unexpectedweb.blogspot.in/p/gmail-tracking-url.html">
  <div class="column">
    <div class="card">
      
      <div class="container hovdiv red">
        <h5 class="codetype">JS, GMAIL, Google Analytics</h5>
        <h3 class="title" style="color:#b71c1c;">Gmail Tracking URL</h3>
        <p class="description">Track your outgoing Gmail messages have been read or not.</p>
                
      </div>
    </div>
  </div>
  </a>


  <a href="http://unexpectedweb.blogspot.in/p/epoch.html">
  <div class="column">
    <div class="card">
      
      <div class="container hovdiv cyen">
        <h5 class="codetype">JAVASCRIPT, </h5>
        <h3 class="title" style="color:#1c67b7;">Epoch Converter</h3>
        <p class="description">Convert normal Date and Time into epoch time, also known as Unix time </p>
                
      </div>
    </div>
  </div>
  </a>


  <a href="http://unexpectedweb.blogspot.in/p/youtube-download-link-extractor.html">
  <div class="column">
    <div class="card">
      
      <div class="container hovdiv pink">
        <h5 class="codetype">JAVASCRIPT, YOUTUBE, HACK</h5>
        <h3 class="title" style="color:#b71caa;">YouTube Download link Extractor</h3>
        <p class="description">Find the direct download link of YouTube video from the source-code of page.</p>
                
      </div>
    </div>
  </div>
  </a>

  <a href="http://unexpectedweb.blogspot.in/p/url-decoder.html">
  <div class="column">
    <div class="card">
      
      <div class="container hovdiv cyen">
        <h5 class="codetype">JAVASCRIPT</h5>
        <h3 class="title" style="color:#1c67b7;">URL Decoder</h3>
        <p class="description">Decode and Encode URI Component, Simplify the complex link. </p>
                
      </div>
    </div>
  </div>
  </a>

You Can add more color for Cards Just Add Following code before </style>.

.hovdiv.cyen:hover {
  background-color: #009688;
  color:#fdfdfd !important;
}

Select Color from below table.

Add New Card:

<a href="http://yourlink.com">
  <div class="column">
    <div class="card">
      // select color of Div, add previous in style. here cyen is the class name

      <div class="container hovdiv cyen"> 
        <h5 class="codetype">PAGE</h5>
        <h3 class="title" style="color:#1b5e20;">About</h3> // Select Dark Color in same range
        <p class="description"> Blog where you'll find some interesting things around the web, that you never knew existed.</p>
                
      </div>
    </div>
  </div>
  </a>

Create Navigation Tabs using HTML, CSS, JS

By ABONZERTV

Read

0 Comments

Vertical Tabs HTML Code

Vertical Tab Example :

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_tabulators_sidenav

Our Code: https://jsfiddle.net/abonzer/etsbu4pm/

<!DOCTYPE html>
<html>
<head>
<style>

body {
    font-family: Verdana,sans-serif;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}

h2 {
 font-style: oblique;
    font-weight: 400;
    margin: 10px 0;
    font-size: 20px;
 font-family: "Segoe UI",Arial,sans-serif;
}

div {
    display: block;
}

.red {
 color:#fff!important;
 background-color:#f44336!important;
 
}


.sidenav a { 
   text-decoration:none!important;
   padding: 4px 2px 4px 16px;
   display:block;
   
}


.sidenav{
 height:100%;
 width:200px;
 color: #000!important;
    background-color: #f1f1f1!important;
 position:fixed!important;
 z-index:1;
 overflow:auto;
 padding:4px 2px 4px 16px;
 box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
}
.sidenav a:hover {
 background-color:#ccc;
 color:#000;
}


</style>
</head>


<body>

<nav class="sidenav" style="width:160px">
  <div style="padding:0.01em 16px;">
    <h2>Email Tracker</h2>
  </div>
  <a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'How to use')" style=" color: #333333;">How to use</a>
  <a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'Track Mail')" style=" color: #333333;">Track Mail</a>
  <a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'Tracking ID')" style=" color: #333333;">Tracking ID</a>
</nav>

<div style="margin-left:160px">
  

  <div id="How to use" class="city" style="padding: 8px 72px!important; display:none;">
    <h2>How to use Email Tracking Feature</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
  </div>

  <div id="Track Mail" class="city" style="padding: 8px 72px!important; display:none;">
    <h2>Track Email Read Receipts</h2>
    <p>Paris is the capital of France.</p> 
    <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
  </div>

  <div id="Tracking ID" class="city" style="padding: 8px 72px!important; display:none;">
    <h2>Add your Analytics ID</h2>
    <p>Tokyo is the capital of Japan.</p>
    <p>It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
  </div>

</div>

<script>
function openCity(evt, cityName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" red", "");
     
  }
  document.getElementById(cityName).style.display = "block";
   
    evt.currentTarget.className += " red ";
}
</script>

</body>
</html>

How to Add a Full Screen Popup Search box in Blogger

By ABONZERTV

Read

1 Comments

A search box is one of the prime components of website that define and enhance the User Interface of a website. let's know how to Add Stylish Custom popup Search Boxes To Blogger. It makes searching simpler and interesting as it provides a pleasing interface to users.

For those who are still not sure about full screen search, they can go to this demo site, to see it in live action.

DEMO

Setps for Installing Full Screen Search popup box in Blogger:

Setp1:

Go to Blogger >> Template >> Edit HTML, Now in the blogger template editor, (Ctrl+F)find ]]></b:skin> tag and just above it paste the following CSS Code.

/*=====================================

= Popup Search Box

=====================================*/

.dialog-box button[type="submit"] {

margin-top: 20px;

padding: 0.8em 2em;

background-color: #377ef0;

color: #fff;

border: none;

text-transform: uppercase;

-webkit-transition: all 0.3s;

-moz-transition: all 0.3s;

-ms-transition: all 0.3s;

-o-transition: all 0.3s;

transition: all 0.3s;

}

.dialog-box input[type="text"] {

padding: 0 20px;

font-size: 13px;

letter-spacing: 0.1em;

color: #888;

height: 50px;

line-height: 1;

background-color: #fff;

border: 1px solid #ddd;

-webkit-transition: all 0.2s;

-moz-transition: all 0.2s;

-ms-transition: all 0.2s;

-o-transition: all 0.2s;

transition: all 0.2s;

box-sizing: border-box;

width: 100%;

}

.dialog-box h2 {

margin: 0;

font-weight: 400;

font-size: 24px;

padding: 32px 0 25px;

text-transform: uppercase;

}

.dialog-box {

max-width: 520px;

min-width: 290px;

background: #fff;

padding: 20px;

text-align: center;

position: relative;

z-index: 5;

margin: auto;

}

.overlay {

position: fixed;

width: 100%;

height: 100%;

top: 0;

left: 0;

background: rgba(55, 58, 71, 0.9);

}

.overlay .overlay-close {

width: 30px;

height: 29px;

position: absolute;

right: 0px;

top: 0px;

border: none;

background: #377ef0;

float: left;

color: #fff;

outline: none;

z-index: 100;

}

.overlay .dialog-inner{

text-align: center;

position: relative;

top: 50%;

height: 60%;

-webkit-transform: translateY(-50%);

transform: translateY(-30%);

}

.overlay-mbl {

opacity: 0;

visibility: hidden;

-webkit-transition: opacity 0.5s, visibility 0s 0.5s;

transition: opacity 0.5s, visibility 0s 0.5s;

z-index:100;

}

.overlay-mbl.open {

opacity: 1;

visibility: visible;

-webkit-transition: opacity 0.5s;

transition: opacity 0.5s;

}

.dialog-box button[type="submit"]:hover,.overlay .overlay-close:hover {

background: #212121;

}

#trigger-overlay {

cursor: pointer;

float: left;

}

#trigger-overlay {

background: #377ef0;

color: #fff;

padding: 10px;

}

#trigger-overlay a {

color: #fff;

text-decoration:none;

}

#trigger-overlay:hover {

background: #111;

}

Setp2:

Now we add jQuery files in the template code for Full screen search. Find </body> tag in the code and just paste the following Code above it.

<script src='https://sites.google.com/site/data342323/modernizr.custom.js'/>
<script src='https://sites.google.com/site/data342323/fullscreen_search.js'/>

Step 3:

Find <body> in code and just below it paste the following code. Following HTML code show the Search div container Style/layout that will appear upon clicking the search button, you can be edit this code according to your requirements.

<div class='overlay overlay-mbl'>
<div class='dialog-inner'>
<div class='dialog-box'>
<h2>Enter your keyword</h2>
<form action='/search' class='search-popup-inner' method='get'>
<input name='q' onblur='if (this.value == '') {this.value = 'Search the site';}' onfocus='if (this.value == 'Search the site') {this.value = '';}' type='text' value='Search the site'/>
<button type='submit'>Search</button>
</form>
<div><button class='overlay-close' type='button'>X</button></div>
</div>
</div>
</div>

Final Step:

You are almost done the process for install Full Screen Search popup box in Blogger. the last step to complete this you need to display/Add a search icon or button to open the search box Popup.

Option1: To add the search icon in the sidebar of your blogger site, go to Layout >> Add a Gadget >> Add HTML/JavaScript. Now paste the following search button HTML code in the HTML text area.

<div id="trigger-overlay" >
<a><i class="fa fa-search"></i> SEARCH</div>

Option2: to add fixed button to the bottom right of page (Demo)

1. Find </head> in code and just above it paste the following code.

<style>
#foo {
position: fixed;
bottom: 0;
left: 0;
}
</style>

2. Find the last </div> in your blogger template and just below it paste the following code. To find last div, first find </body> tag and then scroll mouse up and find </div>.

<div id='foo'>
<div id='trigger-overlay'><a><i class='fa fa-search'/> SEARCH</a></div>

</div>

Subscribe to: Posts ( Atom )

Unexpected Web

About

How to create a "card" with CSS

Create Navigation Tabs using HTML, CSS, JS

Vertical Tabs HTML Code

How to Add a Full Screen Popup Search box in Blogger

Setps for Installing Full Screen Search popup box in Blogger:

Recent Posts

Facebook

Search This Blog

Blog Archive

Labels

Report Abuse

Pages

About Me

Edit This Menu

Looking for something? Search here!

Unexpected Web

Connect

About

How to create a "card" with CSS

Create Navigation Tabs using HTML, CSS, JS

Vertical Tabs HTML Code

How to Add a Full Screen Popup Search box in Blogger

Setps for Installing Full Screen Search popup box in Blogger:

Recent Posts

Facebook

Search This Blog

Blog Archive

Labels

Report Abuse

Pages

About Me

Edit This Menu

Looking for something? Search here!