?
Solved

making a date header icon

Posted on 2014-03-17
3
Medium Priority
?
399 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 360 total points
ID: 39938237
Hey,
Check below Sample HTML created for you...

Calender-Icon.zip
0
 
LVL 43

Accepted Solution

by:
David S. earned 1640 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
With the power of JIRA, there's an unlimited number of ways you can customize it, use it and benefit from it. With that in mind, there's bound to be things that I wasn't able to cover in this course. With this summary we'll look at some places to go…
Progress
Suggested Courses

840 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