Skip to content

Instantly share code, notes, and snippets.

Avatar

Julie Ann Horvath nrrrdcore

  • Apple
  • San Jose, CA
View GitHub Profile
@nrrrdcore
nrrrdcore / retina_bg.css
Created Nov 15, 2012
Retina-Ready Background Swatching (Minus the Bullshit)
View retina_bg.css
background-image: url('../images/greyfloral_@2X.png');
background-size: 150px 124px; /* size in px of image @1X */
View image_mask.css
-webkit-mask-image: -webkit-linear-gradient(rgba(0,0,0,1), rgba(0,0,0,.8));
@nrrrdcore
nrrrdcore / bg.css
Created May 7, 2013
Perfect radial bg
View bg.css
background: -webkit-radial-gradient(top, circle cover, rgba(208, 213, 216, 0.05) 32%, lighten(#adb3b7,6%) 100%), url("white_noise_2.png");
@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 / 99_issues.md
Created Aug 21, 2013
A love rap to Mu-An that's more than 140 characters.
View 99_issues.md

If you're having padding problems I feel bad for you son,
I got 99 issues in this repo,
and border-boxing ain't one.

screen shot 2013-08-20 at 6 24 35 pm

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>
View flat-design.css
.flat {
background-image: none;
box-shadow: none;
border: none;
text-shadow: none;
opacity: .8;
}
View rand.jade
script language="javascript"
// random number between 1 and 3
document.getElementById("imgRand").src = "images/hero/"+imageCounter+".jpg";
script language="javascript"
if(localStorage['imageCounter'])
localStorage['imageCounter']++
else
localStorage.setItem('imageCounter', 1);
@nrrrdcore
nrrrdcore / Tiny Design Hack: Write JavaScript-less, Dynamic Tooltip Text with CSS.markdown
Last active Mar 26, 2021
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.

View copied.scss
&:active, &:focus {
outline: none;
&:after {
content: 'Copied!';
}
}