Create a color pallet with a modal window

1 reply [Last post]

Thu, 2011-12-01 22:42

csuhockey3

Offline

Last seen: 1 year 24 weeks ago

newbie

Timezone: GMT-5

Joined: 2011-11-21

Posts: 4

Points: 6

Hi Folks!

I have a modal window that I want to populate with color swatches (essentially a color pallet). I'm looking for a pure CSS3 solution, however inserting li's with the three sample colors in the code below are not nesting inside the pallet. Can anyone please help? I've been stumped all day. I stripped the HTML down to basically nothing, but left all of the CSS:

<html>
<head>
 
<style type="text/css">
 
.pallet, .pallet_arrow_right { 
  color:#ffffff;
  cursor:normal;
  display:-moz-inline-stack;
  display:inline-block;
  font-size:12px;
  padding: 10px 10px; /* vertical, horizontal pad */
  position:relative;
  text-align:center;
  text-shadow:0 -1px 1px #111111;
  height: 300px;
  width: 400px;
  -moz-border-radius-topleft:4px ;
  -moz-border-radius-topright:4px ;
  -moz-border-radius-bottomright:4px ;
  -moz-border-radius-bottomleft:4px ;
  border-top-left-radius:4px ;
  border-top-right-radius:4px ;
  border-bottom-right-radius:4px ;
  border-bottom-left-radius:4px ;
  -moz-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
  box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
  background-color:#3b3b3b;
  background-image:-moz-linear-gradient(top,#555555,#222222);
}
.pallet:after, .pallet_arrow_right:after {
  content:"\25B8";
  display:block;
  font-size: 16px;
  height:0;
  line-height:0;
  position:absolute;
}
.pallet_arrow_right:after {
  color:#222222;
  right: -10px;
  top: 15px;
  margin-top: 10px;
}
#aqua {
	height: 75px;
	width:70px;
	background: aqua;
	-moz-border-radius: 15px 5px / 5px 15px;
	border-radius: 15px 5px / 5px 15px;
}
#green {
	height: 75px;
	width:70px;
	background: green;
	-moz-border-radius: 15px 5px / 5px 15px;
	border-radius: 15px 5px / 5px 15px;
}
#yellow {
	height: 75px;
	width:70px;
	background: yellow;
	-moz-border-radius: 15px 5px / 5px 15px;
	border-radius: 15px 5px / 5px 15px;
}
</style>
 
 
<body>
<p>
    <span class="pallet_arrow_right">Inside here, I want rounded boxes to make a color pallet <br /> using the three colors id's as an example and can run from there...</span>  
</p>
 
</body>
</html>

Thank you all for your help, perhaps it's a simple oversight that I am missing because I have been staring at this for so long. I don't require any prefixes besides -moz (this will render in FireFox only). Thank you all for your help, I would really appreciate some pointers!

- CSUhockey3

Tags:

Fri, 2011-12-02 03:39

csuhockey3

Offline

Last seen: 1 year 24 weeks ago

newbie

Timezone: GMT-5

Joined: 2011-11-21

Posts: 4

Points: 6

Solution

Hi Folks,

I didn't get any replies, but now have the solution figured out should anyone be curious.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Alt Text / Background Color Chooser Pallet - DEMO/POC</title>
 
 
<style type="text/css">
html, body {
	margin: 0;
	color: #000;
	font-size:16px;
	background: #ccc;
	font: Helvetica, sans-serif;
}
 
p.white{
	color: white;
}
 
/* HTML5 tags */
header, section, footer, aside, nav, article{
	display: block;
}
 
/* arbitrary container to take the place of the #asset_view attributes to inherit later */
#container {
	width: 1024px;
	margin: 0 auto;
	padding: 330px 0; 
	background: #fff;
}
 
.pallet, .pallet_arrow_right {
 
	/* Dimensions & position of the modal window */
	top: -320px;
	float: right;	
	width: 480px;
	height: 550px;
 
	cursor: normal;
	display:inline-block;
 
	padding: 10px 0px 20px 10px; 
	position:relative;
	text-align:center;
 
	-moz-border-radius-topleft: 8px;
	-moz-border-radius-topright: 8px;
	-moz-border-radius-bottomleft: 8px;
	-moz-border-radius-bottomright: 8px;
 
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
 
	box-shadow:0 1px 2px #000, inset 0 0 0 1px #222, inset 0 2px #777, inset 0 -2px 2px #444;
	-moz-box-shadow:0 4px 15px #222, inset 0 0 0 8px #fff, inset 0 5px #f3f3f3;
 
	background-color:#3b3b3b;  /* just picked a dark gray */
	background-image:-moz-linear-gradient(top, #555, #222); /* Not sure if we need it, but it's here */
}
 
.pallet:after, .pallet_arrow_right:after {
	height:0;
	display:block;
	line-height:0;
	content:"\25B8"; /* NOT a CSS triangle,placeholder unicode character right-arrow for now */
	font-size: 16px;
	position:absolute; 
}
 
.pallet_arrow_right:hover { }
 
/* Position of the triangle, replace with a 45degree CSS triangle later */
.pallet_arrow_right:after {
	top: 15px;
	right: -25px;
	color: white;
	font-size: 48px;
	margin-top: 30px;
}
	ul {
		padding: 10px;
		list-style: none;
		display: inline;
	}
 
	li{
		display: inline-block;
	}
 
		/* With the talk of an array, I thought listing the CSS in this fashion would be easier for us */
 
		#aqua,
		#green,
		#yellow,
		#white {
		/* Generic properties for all swatches */
			width: 75px;
			height: 75px;
			padding: 25px 10px 0px 10px; 
			border: solid 4px;
			margin-bottom: 8px;
			margin-left: 5px;         
			border-radius: 15px;
			-moz-border-radius: 15px;
		}
 
		/* Reserverd web safe primary colors for proof of concept */
		#aqua {
			background: aqua; 
			border-color: white;
		}
		#green {
			background: green; 
			border-color: red;
		}
		#yellow {
			background: yellow; 
			border-color: blue;
		}
		#white {
			background: white; 
			border-color: green;
		}
 
 
</style>
</head>
<body>
        <div id="container">
                <div class="pallet_arrow_right">  
 
        		<p class="white">PLACEHOLDER</p>
        		<p class="white">PLACEHOLDER</p>
 
                	<ul>
                		<li id="white">SAMPLE <BR /> TEXT</li>
                		<li id="green">SAMPLE <BR /> TEXT</li>
                    	<li id="aqua">SAMPLE <BR /> TEXT</li>
                        <li id="yellow">SAMPLE <BR /> TEXT</li>
                    </ul>
                	<ul>
                    	<li id="aqua">SAMPLE <BR /> TEXT</li>
                    	<li id="yellow">SAMPLE <BR /> TEXT</li>
                    	<li id="white">SAMPLE <BR /> TEXT</li>
                        <li id="green">SAMPLE <BR /> TEXT</li>
                    </ul>
                	<ul>
                        <li id="green">SAMPLE <BR /> TEXT</li>
                        <li id="aqua">SAMPLE <BR /> TEXT</li>
                        <li id="yellow">SAMPLE <BR /> TEXT</li>
                        <li id="white">SAMPLE <BR /> TEXT</li>
                    </ul>
                	<ul>
                		<li id="yellow">SAMPLE <BR /> TEXT</li>
                        <li id="green">SAMPLE <BR /> TEXT</li>
                        <li id="white">SAMPLE <BR /> TEXT</li>
                     	<li id="aqua">SAMPLE <BR /> TEXT</li>
                    </ul>
                </div> <!--end .pallet_arrow_right-->
        </div> <!--end container-->
</body>
</html>

-CSUhockey3

Create a color pallet with a modal window

Solution

User login

Navigation