Solved

making a date header icon

Posted on 2014-03-17
3
369 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 Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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 …
The purpose of this video is to demonstrate how to insert an Iframe into 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 : Open Page or Post…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

758 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

22 Experts available now in Live!

Get 1:1 Help Now