Skip to content

Instantly share code, notes, and snippets.

View carlosrojaso's full-sized avatar
🎯
Focusing

Carlos Rojas carlosrojaso

🎯
Focusing
131 followers · 43 following
View GitHub Profile
@carlosrojaso
carlosrojaso / CSS3 The box-shadow
Created May 12, 2014 07:41
CSS3 The box-shadow
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
@carlosrojaso
carlosrojaso / CSS3 The border-radius
Created May 12, 2014 07:37
CSS3 The border-radius
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
@carlosrojaso
carlosrojaso / Server-Sent Events
Created May 12, 2014 07:33
Server-Sent Events
<!DOCTYPE html>
<html>
<body>
<h1>Getting server updates</h1>
<div id="result"></div>
<script>
if(typeof(EventSource)!=="undefined")
{
var source=new EventSource("demo_sse.php");
@carlosrojaso
carlosrojaso / app cache
Last active August 29, 2015 14:01
app cache
<!DOCTYPE html>
<html manifest="demo_html.appcache">
<body>
<script src="demo_time.js">
</script>
<p id="timePara"><button onclick="getDateTime()">Get Date and Time</button></p>
<p><img src="http://carlosrojasblog.com/wp-content/uploads/2013/09/logotipo_w4.png" width="336" height="69"></p>
<p>Try opening <a href="tryhtml5_html_manifest.htm" target="_blank">this page</a>, then go offline, and reload the page. The script and the image should still work.</p>
</body>
</html>
@carlosrojaso
carlosrojaso / Storage
Created May 12, 2014 07:27
Storage
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
// Check browser support
if (typeof(Storage) != "undefined")
{
@carlosrojaso
carlosrojaso / drag and drop
Created May 12, 2014 07:25
drag and drop
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
@carlosrojaso
carlosrojaso / geolocation
Created May 12, 2014 07:23
geolocation
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
@carlosrojaso
carlosrojaso / progress
Created May 12, 2014 07:21
progress
<!DOCTYPE html>
<html>
<body>
<video id="video1" controls="controls">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
@carlosrojaso
carlosrojaso / video
Created May 12, 2014 07:13
video
<!DOCTYPE html>
<html>
<body>
<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button>
<br>
<video id="video1">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
@carlosrojaso
carlosrojaso / lineTo
Created May 12, 2014 07:09
lineTo
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");