Solved

making a date header icon

Posted on 2014-03-17
3
374 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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

This is about my first experience with programming Arduino.
Computer science students often experience many of the same frustrations when going through their engineering courses. This article presents seven tips I found useful when completing a bachelors and masters degree in computing which I believe may he…
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…

831 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