nrrrdcore

.bended-shadow {
  position: relative; 
  width: 500px; 
  margin: 200px auto;
}

.bended-shadow::before, .bended-shadow::after {
  content: '';
  position: absolute;
  width: 60%;

nrrrdcore

input {
  height: 34px;
  width: 100%;
  border-radius: 3px;
  border: 1px solid transparent;
  border-top: none;
  border-bottom: 1px solid #DDD;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.39), 0 -1px 1px #FFF, 0 1px 0 #FFF;
}

nrrrdcore

Pass in tooltip text with pseudo classes and the content: ''; property. The text changes with the parent's, in this case the button's, hover and active and focus states.

***Caveat: A user has to click out of button focus state for text to change back.

A Pen by Julie Horvath on CodePen.

License.

nrrrdcore

.border-container {
  width: 28%; /* border will be on the left on this container */
  float: right;
  overflow: hidden; /* only needed if floating container */
  min-height: 600px; /* static height if you want your container to be taller than its content */
  -moz-box-shadow: inset 15px 0 5px -16px rgba(0,0,0,.1), -1px 0 0 #FFF;
  -webkit-box-shadow: inset 15px 0 5px -16px rgba(0,0,0,.1), -1px 0 0 #FFF;
  box-shadow: inset 15px 0 5px -16px rgba(0,0,0,.1), -1px 0 0 #FFF;
  border-width: 0 0 0 1px;
  -webkit-border-image: 

nrrrdcore

<p class="month"><span class="name">July</span> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31<span class="break">hi</span></p>

nrrrdcore

.shadow-stuff {
  -moz-border-radius: 0% 0% 100% 100% / 0% 0% 8px 8px;
  -webkit-border-radius: 0% 0% 100% 100% / 0% 0% 8px 8px;
  border-radius: 0% 0% 100% 100% / 0% 0% 8px 8px;
  -moz-box-shadow: rgba(0,0,0,.30) 0 2px 3px;
  -webkit-box-shadow: rgba(0,0,0,.30) 0 2px 3px;
  box-shadow: rgba(0,0,0,.30) 0 2px 3px;
}

.container {

nrrrdcore

First Time Puppy Guide

Never leave home without:

• Poop bags (I recommend also snagging a bag holder that can be attached to your leash)
• Collapsable water bowl
• Treats (I recommend a fanny pack for storing them and treating for a job well done [you have to do this quickly, puppies have short memories!])
• Wipes
• Leash
• Harness
• Dog tag with your contact info on it

nrrrdcore

&:before {
  display: none;
}

&:after {
  display: none;
}
  
&:hover {
  background-color: #eee;

nrrrdcore

.flat {
  background-image: none;
  box-shadow: none;
  border: none;
  text-shadow: none;
  opacity: .8;
}

nrrrdcore

<div class="drawer">
  <ul>
    <% if !view.index? && view.none_found? %>
      <% view.found_repositories.each do |repo| %>
        <li class="imported">
          <a href="<%= import_overview_path(repo) %>" <% if repo.status.error? %> class="error"<% end %>><%= repo.name %></a>
        </li>
      <% end %>
    <% end %>
  </ul>