Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 10-03-2012, 08:19 PM   PM User | #1
lmorales
Regular Coder

 
Join Date: Mar 2011
Posts: 192
Thanks: 8
Thanked 1 Time in 1 Post
lmorales is an unknown quantity at this point
How did they do this? ( live web cam feed as background for website

http://www.rachelcomey.com/

changed their background to be a live kitten feed. This is just such a cool friggin idea, I was wondering if anyone understood how they did this?
lmorales is offline   Reply With Quote
Old 10-03-2012, 09:32 PM   PM User | #2
COBOLdinosaur
Regular Coder

 
COBOLdinosaur's Avatar
 
Join Date: Jul 2002
Location: Canada
Posts: 293
Thanks: 0
Thanked 18 Times in 18 Posts
COBOLdinosaur is an unknown quantity at this point
It is done with some very detailed CSS and an embedded url that points to a base base64 string. There is some scripting going on around it as well. Cool? Not sure about that. It is very distracting, and I know my users would complain about it.

Here is the CSS for what appears to be the applicable code:

Code:
/* CMS Home Page */
/*body.cms-home { background:url(../images/homepage/rc_fpo_still.jpeg) center center fixed no-repeat; background-size:cover; -moz-background-size: cover; -webkit-background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/homepage/rc_fpo_still.jpeg', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/homepage/rc_fpo_still.jpeg', sizingMethod='scale')";
 }*/
.cms-home .subtitle {}
.cms-index-index .subtitle {}
.video-bg { background:#000; }
.video-bg #flash-loader { background:url(../images/loader-white.gif) 0 0 no-repeat; display:block; height:16px; left:20px; position:fixed; top:20px; width:16px; z-index:99999; }
.video-bg #flashcontent { height:100%; left:0; position:fixed; top:0; width:100%; z-index:-1; opacity:0; filter:alpha(opacity=0); }
.video-bg .header-menu *,
.video-bg .nav-container *,
.video-bg .header-container .welcome-msg *,
.video-bg .header-container .account-links,
.video-bg .header-container .account-links *,
.video-bg .header .links *,
.video-bg .header .block-subscribe,
.video-bg .header .block-subscribe *,
.video-bg #search_mini_form *,
.video-bg .header .welcome-msg,
.video-bg .header .login-link *,
.video-bg .footer-container * { border-color:#fff !important; color: #fff !important; }
.video-bg .header .topcart-wrap, .video-bg .header .topcart-wrap .block-cart { border-color:#fff; }
.video-bg .header .topcart-wrap > a { color:#fff; }
.video-bg .header-container .gradient {
	padding-top:0 !important;
	top:-100%;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjciLz4KICAgIDxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNyIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 25%, rgba(0,0,0,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.7)), color-stop(25%,rgba(0,0,0,0.7)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 25%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 25%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 25%,rgba(0,0,0,0) 100%); /* IE10+ */
	background: linear-gradient(top,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 25%,rgba(0,0,0,0) 100%); /* W3C */
}
.video-bg #nav li.show > a,
.video-bg .header-menu ul.level1 > li.over > a,
.video-bg .quick-access #news-subscribe.show { background-image:url(../images/nav-close-white.png); }
.video-bg .header .welcome-msg a { background-image:url(../images/arrow-down-white.png); }
.video-bg .header-container .form-search button.button > span { background-image:url(../images/search-white.png); }
__________________
100% standards compliant code is 100% correct 100% of the time.
one of my toys from my repository and perhaps some help getting help

Cd&
COBOLdinosaur is offline   Reply With Quote
Old 10-03-2012, 11:30 PM   PM User | #3
coothead
Senior Coder

 
coothead's Avatar
 
Join Date: Jan 2004
Location: chertsey, a small town 25 miles south west of london, england.
Posts: 1,551
Thanks: 0
Thanked 195 Times in 191 Posts
coothead will become famous soon enough
Hi there lmorales,

it is not very difficult to achieve,

Here is a working example...
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://www.rachelcomey.com/skin/frontend/default/comey/swf/homepage/">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>test page</title>

<style type="text/css">
html,body {
    height:100%;
    margin:0;
    overflow:hidden;
 }
#background  { 
    height:100%;
    position:relative;
 }
#background  object {
    display:block;
    width:100%;
    height:780px;
 }
#page {
    position:absolute;
    z-index:1;
    width:100%;
    height:100%;
    top:0;
 }
#content {
    width:950px;
    height:460px;
    padding:20px 25px;
    border:1px solid #000;
    margin: 40px auto;
    color:#fff;
    background-color:rgba(0,0,0,0.4);
    overflow:auto;
 }
</style>

</head>
<body>

<div id="background">

<object data="WT01_SimplestPlayer.swf" type="application/x-shockwave-flash">
 <param name="movie" value="WT01_SimplestPlayer.swf">
 <param name="quality" value="high">
 <param name="wmode" value="transparent">
</object>

<div id="page">

<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
faucibus felis. Vivamus at metus eget eros consequat fringilla. 
Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
tellus. Praesent felis tortor, scelerisque vitae fringilla 
non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
consectetur in nec lacus.
</p><p>
Phasellus porta, dui a elementum egestas, odio sapien rhoncus 
lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus 
ac quam pellentesque lacinia quis sit amet augue. Fusce eu 
euismod urna. Nunc volutpat scelerisque tempus. Donec eget arcu 
et mauris scelerisque tristique. Donec fringilla mauris dolor, 
sit amet vulputate lacus. Nulla feugiat mattis nulla non 
tincidunt. Nam sit amet dolor eros, a viverra lacus. Nunc quis 
nisi eget neque tempus facilisis eu quis sapien.
</p><p>
Ut et metus a massa rhoncus cursus. Integer luctus luctus enim, 
tristique rhoncus enim feugiat eu. Etiam porttitor volutpat 
massa sed congue. Sed eros nisl, volutpat ac dapibus quis, 
ultricies id diam. Mauris at elit eget quam ullamcorper sagittis 
ac vel lorem. Ut nec justo libero. Phasellus eget pharetra elit. 
Proin viverra, neque non eleifend vehicula, nulla augue gravida 
felis, non fermentum lorem odio ac nunc. Aliquam pretium 
scelerisque consectetur. Proin ultrices urna non magna interdum 
a sodales turpis suscipit. Mauris sollicitudin nisl ac arcu 
sodales cursus. Maecenas bibendum neque vitae orci mollis ac 
vulputate ante auctor. Sed sodales odio id ante sagittis 
faucibus.
</p><p>
Curabitur gravida, neque id volutpat tincidunt, justo eros 
interdum dui, nec mattis eros nunc a ipsum. Aenean in orci id 
turpis luctus interdum nec ut est. Nunc lacinia sagittis nibh 
vitae bibendum. Cras malesuada, felis vitae egestas aliquet, 
mauris diam vehicula quam, eget scelerisque felis nulla id 
tellus. Curabitur non laoreet dolor. Vestibulum sodales 
hendrerit elit vitae eleifend. Praesent faucibus mauris sed erat 
accumsan ac cursus lacus molestie. Donec a nisi a risus malesuada 
molestie nec at odio. Maecenas eleifend tincidunt lacus nec 
vulputate. Vestibulum eleifend pulvinar sem, sit amet auctor eros 
pellentesque quis. Sed et nulla non eros auctor malesuada. 
Vestibulum erat arcu, hendrerit vel cursus nec, sagittis vitae 
sapien. Nulla facilisi. Sed nec molestie mauris. Donec non dui 
urna.
</p>
</div><!-- end #content" -->

</div><!-- end #page" -->

</div><!-- end #background" -->

</body>
</html>
coothead
coothead is offline   Reply With Quote
Old 10-04-2012, 05:07 PM   PM User | #4
superwookie
New Coder

 
Join Date: Jul 2012
Posts: 58
Thanks: 13
Thanked 5 Times in 5 Posts
superwookie is an unknown quantity at this point
Quote:
Originally Posted by COBOLdinosaur View Post
Cool? Not sure about that. It is very distracting, and I know my users would complain about it.
I think if it were done the right way, it could be a pretty cool idea. If you were, for instance, a resort with a live feed of the beachfront, it could be downright idyllic.
superwookie is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 02:17 AM.


Advertisement
Log in to turn off these ads.