UI, javascript, jQuery, Bootstrap, PHP, Responsive design solutions.: CSS

Browsing "Older Posts"

Browsing Category "CSS"

While using responsive frameworks like twitter bootstrap we came across a situation where we want to use file upload with consistent look and feel, but different browsers treat file input differently while displaying on browsers.

HTML:

<span class="btn btn-file">
  Upload  <input accept="image/*" type="file">
</span>

CSS:

body{
  margin: 20px;
}

/* Give custom look and feel to file upload*/
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;   
    cursor: inherit;
    display: block;
    
}
.btn-file {
    position: relative;
    overflow: hidden;
    color: #2A476B;
    font-weight: bold;
    background-color: #f1f1ef;
    box-shadow: 1px 10px 20px 0px rgba(218, 215, 206,0.8);
    width:200px;
    height:50px;
    line-height: 30px;
    border: 2px solid #2A476B;    
}
.btn-file:hover{
   background: #2A476B;
   color:#ffffff;
}

Preview:

See the Pen Twitter Bootstrap custom file input styling by Yashwant Patel (@yashwant) on CodePen.

Download Source

Tags: CSS

CSS - Twitter Bootstrap custom file input styling

By yash → Tuesday, July 26, 2016

Problem statement

Consider a scenario where you have DOM like following..

<div class="container">
    <div class="row">
        <div class="col-md-6">
            A [TEXT]
        </div>
        <div class="col-md-6">
            B [IMAGE]
        </div>
    </div>
</div>

But on many occasions you need to display bottom column i.e "B[IMAGE]" at the top of "A[TEXT]" section on mobile devices.

Solution:

If you are using twitter bootstrap, you can make it without writing any extra javascript or CSS. So here comes the solution. Twitter bootstrap provide 2 classes

1. pull-left (float:left )
2. pull-right (float:right )

Step 1:
Add first column as image container (B [IMAGE]) and add class pull-right to it. (it will show image on right side of the page on desktop.)

Step 2:
Add second column as text container ( A [TEXT] ) and add class pull-left to it. (it will show texts on left side of the page on desktop.)

Your DOM structure should look like below.

<div class="container">
    <div class="row">
        <div class="col-md-6 pull-right">
              B [IMAGE] 
        </div>
        <div class="col-md-6 pull-left">
              A [TEXT]
        </div>
    </div>
</div>

Preview

See the Pen Twitter bootstrap place right column image on top of text on mobile devices by Yashwant Patel (@yashwant) on CodePen.

Download Source

Tags: CSS → HTML5 → Twitter Bootstrap

Twitter bootstrap place right Column on top on mobile view

By yash → Friday, April 29, 2016

HTML5 introduces new input type called "number". We can use this to take number input from user. It's a nice addition to the webpages and make things simpler, but design point of view it is not going to make things simpler.
Chrome and Mozilla Firefox browsers by default adds up and down arrows. UI can look ugly due to this if arrow is not required.

HTML:

input[type='number']::-webkit-inner-spin-button, 
input[type='number']::-webkit-outer-spin-button { 
    -webkit-appearance: none;    
    appearance: none;
    margin: 0;  
}
input[type='number'], 
input[type='number']:hover,
input[type='number']:focus {
  -moz-appearance: textfield;
}

CSS:

<input type="number" name="number-demo" >

See the Pen Cross platform hide input type number arrows by Yashwant Patel (@yashwant) on CodePen.

Download Source

Tags: CSS → HTML5

CSS - hide input type number on chrome and mozilla firefox browsers

By yash → Wednesday, April 13, 2016

While printing page of any website many browsers print all the href links, which is sometimes not necessary or look ugly.
To avoid printing href link you just need to add following code into your css file.

CSS

 @media print { 
   a[href]:after {
    content: none !important;
  }
 }

Tags: CSS

CSS - While printing website page hide all anchor href link

By yash → Thursday, April 7, 2016

While developing website most of the time we face the issue to align particular section or element vertically and horizontally center to it's parent element. There are many ways to achieve this requirement but what if the child content is dynamic and unknown ?

There is a solution for that. Make two CSS classes. one for parent element and one for child element. Make parent element Position relative and child element position absolute to it's parent element and play with child element's top,left and transform properties to make child element horizontally and vertically center.

The best part of following code is that you can use only two CSS classes to align element vertically and horizontally center and middle of the section.

Following example can give much clear idea.

HTML:

<div class="container">
  <div class="row">
    <!-- parent container add .parent-center class -->
      <div class="col-md-12 parent-center">
        <!-- child container add .child-center class -->
        <div class="child-center">        
          <h1>Vertically and horizontally center </h1> 
          <h1>Vertically and horizontally center </h1> 
          <h2>Add as main as element you want. </h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        </div>  
    </div>    
  </div> 
</div>

CSS :

.col-md-12 {
   min-height:400px;  
    background: linear-gradient(270deg, #003366, #b27000, #06617d, #067370);
  background-size: 800% 800%;
}
/* parent container css */
.parent-center {
  position: relative;
}
/* child container css */
.child-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff; 
    text-align: center;
}

See the Pen css - Horizontally and vertically center element to it's container by Yashwant Patel (@yashwant) on CodePen.

Download Source

Tags: CSS → HTML

CSS - vertically and horizontally center align any element with its parent element

By yash → Friday, March 18, 2016

Yes this is what you seen in chrome browser if your website has broken images. This will look very ugly if you have image with no accurate source.

Always write "alt" attribute for images. This will help search bots to understand about images. also if image is broken than browsers will show this alternative text. As shown in above image, the alternative text for image is "Broken image".

Now the question is how to style these broken images ?

The answer is : We can use <img> tags after and before css pseudo elements to style broken image.

Example:

HTML:

<body>
    <div class="row center-block">
        <div class="col-xs-6 col-md-6">
            <img src="https://website/boken-image.png"  alt="your image placeholder " />
        </div>
        <div class="col-xs-6 col-md-6">
            <img src="https://unsplash.it/250/300/?random" alt="awesome image" />
        </div>
    </div>
</body>

CSS:

body {
  background: #e9e9e9;
  padding: 25px;
  font-size: 12px;
  color: #777;
}

.row {
  max-width: 600px;
  margin: 0 auto;
}

img {
  display: block;
  position: relative;
  max-width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid #ddd;
  max-width: 250px;
  max-height: 300px;
}

img:before {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  padding: 35px 5px 20px 5px;
  font-family: Helvetica, Arial, sans-serif;
  content: "Broken image of " attr(alt) " (" attr(src) ")";
  color: red;
  text-align: center;
}

img:after {
  display: block;
  position: relative;
  top: -35px;
  width: 100%;
  height: auto;
  padding: 20px 5px;
  background: #fff;
  font-family: 'Glyphicons Halflings';
  content: "\e060";
  text-align: center;
}

Preview :

See the Pen Style broken images by Yashwant Patel (@yashwant) on CodePen.

Download Source

Tags: CSS → HTML

CSS - Style broken images to look better on browsers

By yash → Saturday, March 12, 2016