johannaruiz’s gists

johannaruiz / meetmo-auth.markdown

Created October 1, 2020 16:12

Meetmo auth

A Pen by Johanna Ruiz on CodePen.

License.

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 / 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 / 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 / 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 / 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 / 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.

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 / 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>

Johanna Ruiz johannaruiz

Meetmo auth