Skip to content

Instantly share code, notes, and snippets.

View johannaruiz's full-sized avatar

Johanna Ruiz johannaruiz

10 followers · 17 following
View GitHub Profile
@johannaruiz
johannaruiz / meetmo-auth.markdown
Created October 1, 2020 16:12
Meetmo auth
@johannaruiz
johannaruiz / index.haml
Created April 16, 2013 08:21
3D to Letterpress - Experimenting with 3D text via the CSS3 text-shadow property in combination with CSS3 transitions to transition the 3D text to a true inset/letterpress text effect with text-shadow.
%ul
%li
%a{:title => @title, :href => "#"} Home
%li
%a{:title => @title, :href => "#"} About
%li
%a{:title => @title, :href => "#"} Contact
@johannaruiz
johannaruiz / index.html
Created April 15, 2013 08:20
CSS Generated Content Buttons - I wanted to experiment with icon fonts and pseudo-elements to create some buttons. The buttons and content are generated purely with css. Using the before and after pseudo-elements and the css "content" attribute, the icon and button name have been injected into the DOM using CSS. CSS transitions have been applied…
<div id="social-links">
<ul id="social-icons">
<li class="facebook"><a class="zocial-facebook" href="#"></a></li>
<li class="twitter"><a class="zocial-twitter" href="#"></a></li>
<li class="linkedin"><a class="zocial-linkedin" href="#"></a></li>
<li class="forrst"><a class="zocial-forrst" href="#"></a></li>
<li class="github"><a class="brandico-github"href="#"></a></li>
<li class="instagram"><a class="brandico-instagram" href="#"></a></li>
</ul>
</div>
@johannaruiz
johannaruiz / index.html
Created April 15, 2013 08:18
A CodePen by Johanna Ruiz. Gift Wrapped - I wanted to create a wrapped present out of HTML and CSS. Using a few empty divs, combined with :before and :after pseudo-elements, this was easily created. The most difficult part has been getting a ribbon to look correct. This is a first attempt, and will be revisiting to attain the desired effect.
<div id="gift-container">
<div id="gift-box-top" class="emerald-green">
<div id="ribbon">
<div id="ribbon-tail"></div>
</div>
</div>
<div id="gift-box" class="emerald-green"></div>
</div>
@johannaruiz
johannaruiz / index.html
Created April 15, 2013 08:18
A CodePen by Johanna Ruiz. Stereoscopic 3D Hearts with CSS - Inspired by Simurai's demo of animated stereopscopic text. This is my take on it.
<p id="hearts">
<span>♥</span>
<span>♥</span>
<span>♥</span>
<span>♥</span>
<span>♥</span>
</p>
@johannaruiz
johannaruiz / index.html
Created April 15, 2013 08:17
A CodePen by Johanna Ruiz. Background-Clips in Space. (Webkit only) - I had an idea about draggable elements with static background images and utilizing the background-clip:text css3 property, I wanted to see if the background image would remain static and the element would drag. A little jQuery UI and voila, it did what I thought it would. Unfo…
<h1>Space</h1>
@johannaruiz
johannaruiz / index.html
Created April 15, 2013 08:09
A CodePen by Johanna Ruiz. CSS Triforce webkit-dropshadow - Using pseudo elements and the filter-webkit-dropshadow property, I created this css trifore with a single empty html element.
<div class="triforce"></div>
@johannaruiz
johannaruiz / index.html
Created April 15, 2013 08:01
A CodePen by Johanna Ruiz. Fancy Heading - Just messing around with a heading and pseudo-elements to create a cool looking heading.
<h1>FANCY</h1>
@johannaruiz
johannaruiz / index.html
Created September 12, 2012 01:13
Zelda's triforce, created solely with html and css, combined with the use of :before and :after pseudo elements, I've created my initial proof of concept. Your comments and feedback are appreciated
<div id="triforce">
<div id="triangle" class="shadow">
<div id="shadow"></div>
</div>