Solved

making a date header icon

Posted on 2014-03-17
3
373 Views
Last Modified: 2014-03-19
hi, can you suggest what would be proper parameters to the code below, to make the exact icon that is done as an example (but it is a picture, so you can't see the parameters used to make it)
http://xomisse.com/blog/create-calendar-or-banner-style-date-header-blogger-posts/

i am interested in the first date picture.. (Aug is with red background)..

thanks-
0
Comment
Question by:25112
3 Comments
 
LVL 16

Expert Comment

by:HagayMandel
ID: 39937557
This article explains how to get this very result.
0
 
LVL 19

Assisted Solution

by:Manoj Patil
Manoj Patil earned 90 total points
ID: 39938237
Hey,
Check below Sample HTML created for you...

Calender-Icon.zip
0
 
LVL 42

Accepted Solution

by:
David S. earned 410 total points
ID: 39938518
Really? Two people post solutions and neither uses CSS3? The OP's example page even has the CSS code needed, although the HTML and JS are very poorly written.

To create CSS3 gradients, I recommend this tool: http://www.colorzilla.com/gradient-editor/ (When I use it, I choose the option to include the SVG, called "IE9 support", then I remove the "-ms-linear-gradient" and "-webkit-linear-gradient" declarations as they are then redundant.)

The absolute positioning was unnecessary, so I simplified the CSS code a little:
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">/* <![CDATA[ */
/* Date Style */
.date-header {
	width: 30px; /* CHANGE WIDTH */
	height: 30px; /* CHANGE HEIGHT */
	padding: 10px; /* CHANGE PADDING SPACE */ 
	word-wrap: break-word;
	float: left;
	-webkit-border-radius: 10px; /* CHANGE RADIUS OF CIRCLE */
	-moz-border-radius: 10px; /* CHANGE RADIUS OF CIRCLE */
	border-radius: 10px; /* CHANGE RADIUS OF CIRCLE */
	font-family: 'arvo'; /* CHANGE FONT */ 
	text-align: center; 
	background-color: #fcfcfc; /* CHANGE BACKGROUND COLOUR */
	background: -webkit-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%); /* CHANGE BACKGROUND GRADIENT */
	background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%); /* CHANGE BACKGROUND GRADIENT */
	background: linear-gradient(to bottom, #fcfcfc 0%, #dad8d8 100%); /* CHANGE BACKGROUND GRADIENT */
	font-size: .625em; /* CHANGE FONT SIZE */
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1); /* CHANGE SHADOW */
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.1); /* CHANGE SHADOW */
	border: solid 1px #d2d2d2; /* CHANGE BORDER STYLE, WIDTH AND COLOUR */ 
	line-height:1.3;  
	position: relative;
}

.date-header .month {
	background: #d10000; /* CHANGE BACKGROUND */
	background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%); /* CHANGE BACKGROUND GRADIENT */
	background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%); /* CHANGE BACKGROUND GRADIENT */
	background: linear-gradient(to bottom, #d10000 0%, #7a0909 100%); /* CHANGE BACKGROUND GRADIENT */
	padding: 0 10px; /* CHANGE PADDING SPACE */ 
	position: relative;
	margin: -11px -11px 0;
	-webkit-border-radius: 10px 10px 0 0; /* CHANGE RADIUS OF CIRCLE */
	-moz-border-radius: 10px 10px 0 0; /* CHANGE RADIUS OF CIRCLE */
	border-radius: 10px 10px 0 0; /* CHANGE RADIUS OF BORDER BOTTOM */
	
	padding-top:3px;  
	letter-spacing:3px; /* CHANGE SPACE BETWEEN LETTERS */
	color: #FFFFFF; /* CHANGE FONT COLOUR*/ 
	height:18px; /* CHANGE HEIGHT OF MONTH */ 
	display: block;
}

.date-header .day { 
	font-size:2em; /* CHANGE FONT SIZE OF DAY */
	padding-bottom:1px; /* CHANGE SPACE UNDERNEATH */
	text-shadow: 0 0 #666666; /* CHANGE TEXT SHADOW */
	padding-top: 1px; /* CHANGE SPACE ON TOP */
	letter-spacing:0px; /* CHANGE SPACE BETWEEN LETTERS */ 
}
/* ]]> */</style>
</head>
<body>

<div class='date-header'>
  <span class='month'>Aug</span>    
  <span class='day'>30</span>
</div>

</body>
</html>

Open in new window

0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
This article discusses four methods for overlaying images in a container on a web page
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
Viewers will learn how to properly install Eclipse with the necessary JDK, and will take a look at an introductory Java program. Download Eclipse installation zip file: Extract files from zip file: Download and install JDK 8: Open Eclipse and …

816 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now