Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #10750

    Is it possoble to add drop shadow to portfolio items?

    #69237

    Hi!

    Add this line on your custom.css

    #top .slideshow li img {
    box-shadow: 0 0 5px #000;
    }

    Best regards,

    Ismael

    #69238

    I’m not seeing a drop shadow.

    #69239

    Hi!

    Can you give me a link to your portfolio?

    Regards,

    Ismael

    #69240

    Hey!

    Or maybe this is a browser issue, try this one.

    #top .slideshow li img {
    box-shadow: 0 0 5px #000;
    -webkit-box-shadow: 0 20px 20px #000;
    -moz-box-shadow: 0 20px 20px #000;
    -o-box-shadow: 0 20px 20px #000;
    }

    Regards,

    Ismael

    #69241

    I’m using safari but still not getting anything.

    #69243

    Hey O5,

    Try adding it to the #top .slideshow alone. So the final code will be:

    #top .slideshow li{
    box-shadow: 0 0 10px #000;
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    -o-box-shadow: 0 0 10px #000;
    }

    Hope that does it for you :)

    Regards,

    Devin

    #69244

    It works, I see a thin shadow I guess it’s a matter of tweaking to get the right effect. Could something like a border be applied?

    Thx

    #69245

    Hi O5,

    Add this to what Devin supplied above:

    border:1px solid #000;

    So your code would look like this:

    #top .slideshow li{
    border: 1px solid #000;
    box-shadow: 0 0 10px #000;
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    -o-box-shadow: 0 0 10px #000;
    }

    Note you could change the #000 to any color.

    Regards,

    Mya

    #69246

    Hello Mya

    This is interesting, I’m seeing a border on the top and left of image. Is there a way to add a complete border all the way around?

    Thank you

    #69247

    Hi 05,

    Actually, the code I gave above is supposed to add a border all the way around. You seeing the border on the top and left makes me wonder if the box-shadow is masking the border on the right and bottom?

    I suggest trying a different color or using a thicker border to see if that’s the case.

    Regards,

    Mya

    #69248

    Could any of the other quick CSS code below be conflicting

    .title_container {

    display: none

    }

    #top .price, #top .price span, #top del, #top ins {

    display: inline;

    text-decoration: none;

    font-size: 12px;

    line-height: 18px;

    font-weight: bold;

    }

    #top.archive .price span{

    display:none;

    }

    #top.page-id-19 .price span {

    display: none;

    }

    .products .price_container {

    display:none;

    }

    #top .price {

    color: #000000;

    }

    #top #wrap_all ins {

    color: #000000;

    }

    #top #wrap_all del{

    color: #000000;

    }

    .tax-product_cat .sidebar{display:none;}

    .tax-product_cat .template-shop.content{width:100%; padding-right:0;}

    .news-headline {

    display: none;

    }

    #top .social_bookmarks li.rss {

    display: none;

    }

    .shop_table th.product-name, .shop_table th.product-quantity, .shop_table th.product-total {

    background: none repeat scroll 0% 0% #d8d8d8 ! important;

    color: #ffffff ! important;

    }

    .shop_table tr.cart-subtotal th, .shop_table tr.shipping th, .shop_table tr.total th, .shop_table th strong {

    background: none repeat scroll 0% 0% #D8d8d8! important;

    color:#fff !important;

    }

    .shop_table th.product-name, .shop_table th.product-quantity, .shop_table th.product-total {

    background: #d8d8d8 !important;

    color: #999999 !important;

    }

    div .info {

    background: url(“../images/icons/info.png”) no-repeat scroll 9px center #000000;

    border-color: #000000;

    border-style: solid;

    border-width: 1px;

    box-shadow: 0 0 0 1px #FFFFCC inset;

    color: #FFFFFF;

    }

    #top div.woocommerce_message {

    background: #CCC;

    }

    #top #wrap_all div .thumbnail_container .button:hover {

    color: #FFFFFF;

    }

    #top div.woocommerce_message {

    background-color: #000000;

    background-image: url(“../images/icons/tick.png”);

    border-color: #000000;

    border-style: solid;

    border-width: 1px;

    box-shadow: 0 0 0 1px #FFFFFF inset;

    color: #FFFFFF;

    }

    td.actions .coupon {

    display:none;

    }

    .cart > .button.alt {

    background-color: red;

    color: #EEE;

    }

    #top div div.woocommerce_error a.button, #top div div.woocommerce_message a.button {

    background: none repeat scroll 0 0 transparent;

    float: right;

    left: 8px;

    margin-top: 0;

    position: relative;

    top: -6px;

    }

    #top div.woocommerce_error a.button, #top div.woocommerce_message a.button {

    color: #FFFFFF;

    }

    div .container button.button{

    background-color: #101010;

    }

    .info_text_header a:hover {

    color: #101010; !important;

    }

    .info_text_header a.cart_dropdown_link:hover {

    color: #101010; !important;

    }

    #top .slideshow li{

    border: 1px solid #cccccc;

    box-shadow: 0 0 10px #000;

    -webkit-box-shadow: 0 0 10px #000;

    -moz-box-shadow: 0 0 10px #000;

    -o-box-shadow: 0 0 10px #000;

    }

    #69249

    Hi!

    Can you post a link to the page where you try to add the box shadow(s)?

    Regards,

    Peter

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Drop Shadow’ is closed to new replies.