Jump to content
Che

Ajutor cod CSS3 in IE8 and below

By Che, in Programare

Recommended Posts

Che Collaborator

Che

Posted
Posted

Am codul asta:


<!DOCTYPE html>
<html lang="en">
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
  <head>
<style>
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
</style>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="dcterms.created" content="Sun, 02 Nov 2014 08:00:47 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title></title>
    <style>
	.box1{
  background:black;
  width:200px;
  height:200px;
  position:absolute;
  z-index:5;
  overflow:hidden;
}
.box1 .ribbon{
  width:150px;
  height:30px;
  margin-top:20px;
  margin-left:-33px;
  background:white;
  text-align:center;
  transform:rotate(-45deg);
}
.box2{
  width:200px;
  height:200px;
  padding:20px;
  color:white;
  background:black;
  background:
        -moz-linear-gradient(45deg,  transparent 15px, black 15px),
        -moz-linear-gradient(135deg, black 10px, black 10px),
        -moz-linear-gradient(225deg, transparent 15px, black 15px),
        -moz-linear-gradient(315deg, black 10px, black 10px);
  background:
        -webkit-linear-gradient(45deg,  transparent 15px, black 15px),
        -webkit-linear-gradient(135deg, black 10px, black 10px),
        -webkit-linear-gradient(225deg, transparent 15px, black 15px),
        -webkit-linear-gradient(315deg, black 10px, black 10px);
 background:
        -o-linear-gradient(45deg,  transparent 15px, black 15px),
        -o-linear-gradient(135deg, black 10px, black 10px),
        -o-linear-gradient(225deg, transparent 15px, black 15px),
        -o-linear-gradient(315deg, black 10px, black 10px);
background:
        linear-gradient(45deg,  transparent 15px, black 15px),
        linear-gradient(135deg, black 10px, black 10px),
        linear-gradient(225deg, transparent 15px, black 15px),
        linear-gradient(315deg, black 10px, black 10px);
     background-position: bottom left, bottom right, top right, top left;
    -moz-background-size: 50% 50%;
    -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;

}
	</style>


  </head>
  <body>
   <div class="box1">
  <div class="ribbon">123</div>
</div></br></br></br></br></br></Br></Br></br></br></br></br>
<div class="box2">Lorem ipsum</div>
  </body>
</html>

Care ar trebui sa arate cam asa:

Edit fiddle - JSFiddle

Eu am incercat sa-l fac compatibil cu IE8 dar vad ca nu reusesc. Al doilea patrat apare fara cele doua colturi taiate.

Ma ajuta cineva ?

Multumesc mult !

Che Collaborator

Che

Posted
  • Author
Posted
Pai ar trebui sa folosesti mai multe elemente. Sau nu faci compatibil IE8.

Cu CSS3 PIE: CSS3 decorations for IE mai poti sa folosesti ceva CSS3 pe IE8

Am incercat si cu asta si vad ca nu merge. Poate nu am facut eu bine, nu stiu.

L-am dezarhivat in directorul proiectului si am scris asa:

behavior: url('/PIE/PIE.htc');

si am adaugat si:

-pie-background:linear-gradient(315deg, black 10px, black 10px);

(doar aceste doua linii)

Si nimic, nici o schimbare.

Nu am facut eu bine, ca teoretic trebuia sa mearga ?

Pacalici Apprentice

Pacalici

Posted
Posted

Incearca sa dai relative si z-index pe ce ai pus alea. Nu e extraordinar PIE. Eu unu am renuntat sa mai folosesc. Convingem clientu ca mai bine nu. Ala o sa iti faca si increase de load time. Incearca sa chemi fisieru js in loc de htc. Mai face figuri. Nu sunt sigur dar cred ca mai bine pui fisieru htc in acelasi folder cu css sau html si chemi fara cale relative. Gen behavior: url(PIE.htc) doar.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
Go to topic listing
×
×
  • Create New...