test html patterns

Custom UIs

Custom Views

Custom Components

Custom Layouts

OpenGL ES 2.0


<style>
.vstrip
{
border:5px solid lavender;
padding:0px;
}
.vstrip p.header 
{
  background:lavender;
  color:navy;
  font-weight:bold;
  margin:0px;
  font-family:verdana;
  font-size:16px;
}

.vstrip p 
{
  color:green;
  margin:0 5 0 5;
  font-family:Georgia;
}

</style>
<div style="width:150" class="vstrip">
<p class="header">Custom UIs</p>
<p>Custom Views
<p>Custom Components
<p>Custom Layouts
<p>OpenGL ES 2.0
</div>

Show images for: html book background

how do you specify html absolute position of a div

Search for: how do you specify html absolute position of a div

UI

Custom Views

Custom Components

Custom Layouts

OpenGL ES 2.0


<style>
.a2_vstrip
{
    position:relative;
    width:180px;
    height:140px;
    border:5px solid lavender;
    padding:0px;
}

.a2_image
{
  width:100%;
  height:95%;
}

.a2_vstrip p.header 
{
  background:lavender;
  color:navy;
  font-weight:bold;
  margin:0px;
}

.a2_vstrip p 
{
  color:purple;
  margin:0 5 0 5;
  font-family:Georgia;
  font-weight:bold;
}

.a2_body
{
  position:absolute;
  top:30px;
  left:10px;
}
</style>

    
<div class="a2_vstrip">
<p class="header">UI</p>
   
    <div class="a2_image_div">
    <img class="a2_image"  src="http://www.garchibald.com/ebooks/The-Three-Little-Pigs/Open-Book.jpg"/>
    </div>

<div class="a2_body">
    <p>Custom Views
    <p>Custom Components
    <p>Custom Layouts
    <p>OpenGL ES 2.0
</div>
</div>

Customized UI


Custom Views

Custom Components

Custom Layouts

OpenGL ES 2.0


<style>
.a3_vstrip
{
    position:relative;
    width:250px;
    height:180px;
    padding:0px;
}
.a3_hr
{
   width:100%;
   background-color:purple;
   height:2px;
   margin:0;
}

.a3_image
{
  width:100%;
  height:100%;
}

.a3_vstrip p.header 
{
  color:navy;
  font-weight:bold;
  margin:0px;
}

.a3_vstrip p 
{
  color:purple;
  margin:0 5 0 5;
  font-family:Georgia;
  font-size:16px;
}

.a3_body
{
  position:absolute;
  top:10px;
  left:50px;
}
</style>

    
<div class="a3_vstrip">
    <div class="a3_image_div">
    <img class="a3_image"  src="http://www.garchibald.com/ebooks/The-Three-Little-Pigs/Open-Book.jpg"/>
    </div>
    
<div class="a3_body">
    <p class="header">Customized UI</p>
    <hr class="a3_hr"/>
    <p>Custom Views
    <p>Custom Components
    <p>Custom Layouts
    <p>OpenGL ES 2.0
</div>
</div>

Styling an hr with CSS

Books on CSS

html image as background tag

Search for: html image as background tag


<div background="your-image-url"/>

<style>
.a4_example 
{
width:100;
height:100;
background-image:url("your-url") no-repeat;
background-repeat: no-repeat;
}
</style>

<div class="a4_example">

</div>

See this link for more

css tag background-repeat options

Search for: css tag background-repeat options

rgb(201, 161, 77)

To further refining inspect this element in chrome and adjust the color further