Solved

making a date header icon

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Adjust the position 3 49
Not showing page correctly 3 30
Message not shown 5 33
CSS z-index issue 3 20
Read about how to approach blogging and about ways to do it right. Stand out from the crowd and let your knowledge be consumed by a large audience. This article aims to explain how your blog should look like,  the most important things to do while b…
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 Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
The purpose of this video is to demonstrate how to integrate Mailchimp with Facebook. This will be demonstrated using a Windows 8 PC. Mailchimp and Facebook will be used. Log into your Mailchimp account. : Click on your name. Go to Account Setti…

920 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

12 Experts available now in Live!

Get 1:1 Help Now