Skip to content

Instantly share code, notes, and snippets.

Avatar

Julie Ann Horvath nrrrdcore

  • Apple
  • San Jose, CA
View GitHub Profile
@nrrrdcore
nrrrdcore / inset_input.css
Created Aug 9, 2012
The Perfect Inset Input CSS
View inset_input.css
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
nrrrdcore / border.css
Created May 2, 2012
Faded/Gradient Borders in Pure CSS
View border.css
.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
nrrrdcore / index.html
Created Jun 26, 2013
Text-Align: Justify; Hack
View index.html
<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
nrrrdcore / Tiny Design Hack: Write JavaScript-less, Dynamic Tooltip Text with CSS.markdown
Last active Aug 27, 2018
Tiny Design Hack: Write JavaScript-less, Dynamic Tooltip Text with CSS
View Tiny Design Hack: Write JavaScript-less, Dynamic Tooltip Text with CSS.markdown

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
nrrrdcore / apple-shadow.css
Created May 17, 2012
Bending Shadows Backwards: Apple.com's Container CSS Sorcery
View apple-shadow.css
.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
nrrrdcore / bending-shadow.css
Last active Jan 13, 2017
Simple Bended-Shadow CSS: Create the Bended Photo Effect without writing a million divs.
View bending-shadow.css
.bended-shadow {
position: relative;
width: 500px;
margin: 200px auto;
}
.bended-shadow::before, .bended-shadow::after {
content: '';
position: absolute;
width: 60%;
View puppies.md

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
View tooltip.scss
&:before {
display: none;
}
&:after {
display: none;
}
&:hover {
background-color: #eee;
View flat-design.css
.flat {
background-image: none;
box-shadow: none;
border: none;
text-shadow: none;
opacity: .8;
}
View nav.html.erb
<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>
You can’t perform that action at this time.