Who can determine in which program the picture was made and how can I achieve the same with my pictures, preferably in the online editors, and not the photoshop program installed on the computer, since I don't have it. I tried to do through the online service photoshop-online , everything seems to be fine, but when inserted into html and css it is not displayed at all.

The image of the original image "click to enlarge it":

picture

The picture shows that it is black and its duplicate is displayed below white. Also on the properties of its size 12х24 . The white part is displayed in html , the black is apparently hidden in css .

The image is not the original picture "my failed attempts":

picture2

It is not my original version of the image that is displayed when inserted into html and css .

Here is a part of the css code:

 .social-icon { max-width:100px; height:24px; line-height:24px; display:block; position:relative; padding:0 10px 0 42px; margin:0 0 8px 0; font-size:12px; color:#fff; font-family:'Ubuntu'; text-decoration:none; background:#595959; background:rgba(0,0,0,0.5); border:1px solid rgba(0,0,0,0.05); -webkit-box-shadow:inset 0 -4px 0 0 rgba(0,0,0,0.07), inset 0 -1px 0 0 rgba(0,0,0,0.2), inset 0 1px 0 0 rgba(255,255,255,0.3); -moz-box-shadow:inset 0 -4px 0 0 rgba(0,0,0,0.07), inset 0 -1px 0 0 rgba(0,0,0,0.2), inset 0 1px 0 0 rgba(255,255,255,0.3); box-shadow:inset 0 -4px 0 0 rgba(0,0,0,0.07), inset 0 -1px 0 0 rgba(0,0,0,0.2), inset 0 1px 0 0 rgba(255,255,255,0.3); -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; } .social-icon span { position:absolute; top:6px; left:9px; width:12px; height:12px; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; } .social-icon:after { content:''; position:absolute; left:30px; top:0; bottom:0; width:1px; background:#fff; background:rgba(255,255,255,0.30); -webkit-box-shadow:-1px 0 0 0 rgba(0,0,0,0.1); -moz-box-shadow:-1px 0 0 0 rgba(0,0,0,0.1); box-shadow:-1px 0 0 0 rgba(0,0,0,0.1); }

When changing height:12px; in .social-icon span at 24px , the original picture is not displayed as it should be, but after that the original picture is shown to its full height, i.e. at 24px and the top of the black display is also visible. How to be?

  • Everything should be displayed, apparently you are doing something wrong. "Special pictures" for the web does not exist (as far as I know (there are features, but they should not affect the display as such)). - MedvedevDev
  • @MedvedevDev is possible, but by changing these two pictures one by one, only one of them displays the original one. What is this mysticism? I do not understand why. - dev3java
  • see the developer’s panel if the picture is connected in principle or gives an error (it may incorrectly indicate the paths). Here it is displayed. - MedvedevDev
  • @MedvedevDev with paths all 100% correct. Please take a look at the css code that is added in your initial question. Maybe you understand what's the matter? - dev3java
  • Convert the file to a vector using adobe illustrator and save it in svg format. Then use it. - Raz Galstyan

1 answer 1

With your css code, everything is in order; you don’t show a non-original picture because there is no reflection of the bottom of the white color on the picture itself.

  • yes you are right, did not even notice it, thanks! - dev3java 6:49 pm