CODEWITHSUNDEEP
htmlcss
Umz15
Umz15

Reputation: 61

CSS code doesn't work

I used the CSS3 Toolkit to generate a code but when I paste it in my editor it doesn't return the shape, in fact, it does't return anything on the screen. Can someone spot where I've gone wrong, please. It has nothing to do with how the css file is linked, because it works for my other css code. Just this particular code which I have generated with the CSS3 Toolkit which I've bought from App Store doesn't work.

HTML:

 <!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="indexcss.css">
        <script type="text/javascript" href="dist/js/bootstrap.js"></script>
    </head>
    <body>
        <div class="ToolKitStyle"></div>
    </body>
</html>

CSS:

    .ToolKitStyle{
    background-color: #2EC0FE;
    -moz-border-radius: 34px;
    -webkit-border-radius: 34px;
    border-radius: 34px;
    -moz-box-shadow:inset 0px 4px 9px rgba(0,0,0,1);
    -webkit-box-shadow:inset 0px 4px 9px rgba(0,0,0,1);
    box-shadow:inset 0px 4px 9px rgba(0,0,0,1);
    background-image: -o-linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
    background-image: -moz-linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
    background-image: -webkit-linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
    background-image: -ms-linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
    background-image: linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
}

Upvotes: 1

Views: 106

Answers (3)

Kevin Lynch
Kevin Lynch

Reputation: 24703

Your JS is not linked correctly. Use src not href

<script type="text/javascript"  src="dist/js/bootstrap.js"></script>

As regards your CSS issue -

You do not have any content, that's why you css does not appear to work.

Here is is with height, width defined

DEMO http://jsfiddle.net/kevinPHPkevin/73t6R/

Upvotes: 1

OneOfOne
OneOfOne

Reputation: 99205

You needed to either put something inside the or set width/height : http://jsfiddle.net/2qyEP/

.ToolKitStyle{
    width: 200px;
    height: 200px;
    background-color: #2EC0FE;
    -moz-border-radius: 34px;
    -webkit-border-radius: 34px;
    border-radius: 34px;
    -moz-box-shadow:inset 0px 4px 9px rgba(0,0,0,1);
    -webkit-box-shadow:inset 0px 4px 9px rgba(0,0,0,1);
    box-shadow:inset 0px 4px 9px rgba(0,0,0,1);
    background-image: -o-linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
    background-image: -moz-linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
    background-image: -webkit-linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
    background-image: -ms-linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
    background-image: linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
}

Upvotes: 1

Tib
Tib

Reputation: 2631

You need to add width and height in your css

.ToolKitStyle{
    background-color: #2EC0FE;
    -moz-border-radius: 34px;
    -webkit-border-radius: 34px;
    border-radius: 34px;
    -moz-box-shadow:inset 0px 4px 9px rgba(0,0,0,1);
    -webkit-box-shadow:inset 0px 4px 9px rgba(0,0,0,1);
    box-shadow:inset 0px 4px 9px rgba(0,0,0,1);
    background-image: -o-linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
    background-image: -moz-linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
    background-image: -webkit-linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
    background-image: -ms-linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
    background-image: linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
    width:100px;
    height:100px;
}

Upvotes: 2

Related Questions