2019 년 10 월 29 일 항목이 업데이트되었습니다
유리 네 메츠
웹 사이트를위한 소셜 미디어 버튼 효과
소셜 미디어 버튼과 이미지를 결합 할 수 있다고 생각하십니까? 둘 다 매우 아름답고 창의적으로 보입니다. 예, 매우 흥미로운 방식으로 할 수 있습니다. 그리고 하나도 아니지만 여러 개. 더 정확하게 말하자면,이 기사에서는 이미지 위로 마우스를 가져갈 때 소셜 미디어 버튼에 멋진 효과를 만드는 12 가지 방법을 찾을 수 있습니다. 어떤 경우에는 호버링뿐만 아니라 상호 작용을 추가하는 마우스 클릭도 필요합니다. 그러한 호버 효과를 사용하여 사이트를 돋보이게하는 특이한 방법입니다.
12 개의 예제를 모두 확인하고 아래 링크에서 다운로드하십시오.
다운로드
그건 그렇고, 호버 효과와 관련 하여이 주제에 대한 사이트의 기사가 몇 개 더 있습니다.
효과처럼-사용하십시오!
예를 들어 첫 번째 효과가 마음에 들었습니다. 효과를 확인하려면 아래 이미지 위로 마우스를 가져갑니다.
(이미지 위로 마우스를 이동)
사이트와 한 페이지 판매 사이트 모두에서 가장 중요한 이미지를 강조하는 매우 매력적인 방법입니다. 그러나 이미 썼 듯이 훨씬 더 많은 효과가 있습니다 (12!).
1 단계-HTML
FA (Font Awesome)는 소셜 미디어 버튼에 표시되는 아이콘에 사용됩니다. 이 아이콘은 블록 사이에 한 줄로 연결됩니다. :
| 1 | <링크 rel \u003d "스타일 시트"href \u003d "http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> |
모든 소스를 다운로드 한 후 원하는 효과를 선택해야합니다. 내 효과는 파일에 있습니다. index.html... 이 파일에는 호버 효과를 만드는 데 필요한 모든 스타일이 포함되어 있습니다.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div 클래스 \u003d "image-effect-fall-back"\u003e <div 클래스 \u003d "share-layer"\u003e <a href \u003d "#"class \u003d "share-button share-via-vk"\u003e <i 클래스 \u003d "fa fa-vk"\u003e 접촉</ a\u003e <a href \u003d "#"클래스 \u003d "페이스 북을 통한 공유 버튼"> <i class \u003d "fa fa-facebook"\u003e 페이스 북</ a\u003e <a href \u003d "#"클래스 \u003d "공유 버튼 트위터를 통해 공유"> <나는 클래스 \u003d "fa fa-twitter"\u003e 트위터</ a\u003e </ div\u003e <div 클래스 \u003d "이미지 레이어"\u003e <img src \u003d "images / tree.jpg"width \u003d "500"alt \u003d "(! LANG : California surf" > !} </ div\u003e </ div\u003e |
필요한 모든 구조가 있습니다. 남은 것은 CSS에서 스타일을 설정하는 것입니다. 따라서 우리는 두 번째 단계와 동시에 마지막 단계로 넘어갑니다.
2 단계-CSS
스타일은 블록 사이의 모든 HTML 파일에 있습니다. ... 즉, 다른 효과를 가진 각 파일에서 문서 상단의이 블록에는 해당 스타일이 있습니다.
이러한 스타일을 가져 와서 스타일 시트에 배치해야합니다.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | .image-effect-fall-back (너비 : 500px; 높이 : 300px; 위치 : 상대; 여백 : 0 auto; -webkit-perspective : 800px; 관점 : 800px;) .image-effect-fall-back .image-layer (위치 : 절대; 상단 : 0; 왼쪽 : 0; 높이 : 300px; -webkit-transition : 0.6s; 전환 : 0.6s; z-index : 1;) .image-effect-fall-back : hover .image- layer (-webkit-transform : rotateX (70deg); transform : rotateX (70deg); overflow : visible;) .image-effect-fall-back .image-layer img (높이 : 100 %;) .image-effect-fall -back .image-layer : 이전 (내용 : ""; 위치 : 절대; 상단 : 0; 왼쪽 : 0; 너비 : 100 %; 높이 : 100 %; 배경 : rgba (0, 0, 0, 0.5); 상자 -shadow : 000100px 50px rgba (0, 0, 0, 0.5); 불투명도 : 0; -webkit-transition : 모두 0.5s; 전환 : 모두 0.5s; -webkit-transform : rotateX (114deg) translateZ (-26px ) translateY (110px) 스케일 (0.75 ); 변환 : rotateX (114deg) translateZ (-26px) translateY (110px) scale (0.75); -webkit-transform-origin : 하단; -ms-transform-origin : 하단; 변형 출처 : 하단; ) .image-effect-fall-back : hover .image-layer : before (불투명도 : 0.3;) .image-effect-fall-back .share-layer (위치 : 절대; 하단 : 100px; 왼쪽 : 0; 너비 : 100 %; 높이 : 100px; 불투명도 : 0; Z- 색인 : 10; -webkit-transition : 0.6s; 전환 : 0.6s; -webkit-transform : rotateX (70deg); transform : rotateX (70deg);) .image -effect-fall-back : hover .share-layer (불투명도 : 1; -webkit-transform : rotateX (0deg) translateY (-70px); transform : rotateX (0deg) translateY (-70px);) / * 모든 버튼의 스타일 * / .share-button (display : inline-block; text-decoration : none; color : #ffffff; padding : 12px; width : 90px; border-radius : 2px; margin : 25px 10px;) / * 소셜 미디어 버튼 색상 * / .share-via-vk (배경색 : # 4C75A3;) .share-via-facebook (배경색 : # 3b5998;) .share-via-twitter (배경색 : # 00aced;) |
즉시 경고합니다. 일부 예제는 jQuery를 사용합니다. 왜냐하면 전체 효과를 보려면 이미지를 클릭해야하기 때문입니다. 원하는 예제와 함께 페이지에서 사용되는 모든 JS 코드를 가져 오면됩니다.
주의! CSS 코드를 스타일 시트에 붙여 넣은 후 버튼이 예제에 표시된대로 정확하게 표시되지 않을 수 있습니다. 이는 스타일 시트가 데모에 사용 된 요소와 클래스에 대해 서로 다른 스타일을 가지고 있기 때문일 수 있습니다.
산출
원칙적으로 창의성은 항상 환영 받았습니다. 여기에서 모든 사람이 12 가지 효과 중 하나를 선택하여 향후 자신의 프로젝트에서 사용할 수있을 것이라고 생각합니다.
- 크기 조정은 품질에 영향을주지 않습니다.
- retina 디스플레이를 포함한 모든 기기에 완벽하게 표시되며
- 배경, 색상, 그림자 등과 같이 텍스트에 적용 할 수있는 거의 모든 스타일 적용
- 구현 용이성;
소셜 네트워크의 아이콘이있는주의 글꼴.
1. 론도 소셜 아이콘 글꼴
가장 인기있는 소셜 네트워크 중 일부의 훌륭한 글꼴 아이콘뿐만 아니라 불행히도 모든 사람이 좋아하는 아이콘이 없습니다.2. Fontello-아이콘 글꼴 생성기
기성품 아이콘의 거대한 세트가있는 아이콘 생성기. 장점 중 하나는 필요한 아이콘 만 선택하여 글꼴을 생성 할 수 있다는 것입니다. 이는 페이지 최적화 및 해당 글꼴의로드 속도에 유리하게 영향을줍니다. 장점 중 하나는 Vkontakte 및 Odnoklassniki와 같은 소셜 네트워크 아이콘의 존재를 강조 할 수도 있습니다.
3. 모노 소셜 아이콘 글꼴
글꼴 아이콘을 프로젝트에 빠르게 통합하기위한 이상적인 솔루션 인 CSS, SCSS 및 예제 HTML에 대한 포함 코드가 이미 있습니다. 유일한 단점은 인기있는 러시아 소셜 네트워크가 없다는 것입니다.
4. Pixeden-소셜 아이콘 팩
강력한 데모 페이지가있는 멋진 아이콘, 글꼴 아이콘을 사용하고 CSS로 스타일을 지정하는 아름다움을 볼 수 있습니다.
내 블로그에 오신 것을 환영합니다. 오늘은 html과 css로 소셜 미디어 버튼을 만드는 방법을 단계별로 보여 드리고자합니다. 완전 제로에서 시작하여 원하는 결과를 얻습니다. 앞으로!
마크 업 및 기본 스타일
링크 주소에 해시를 넣었습니다. 물론 실제로 사용되는 경우 각 링크에는 전환이 발생할 작업 주소가 있어야합니다.
지금은 다음 스타일을 추가해 보겠습니다.
공유 (
너비 : 280px;
여백 : 0 자동;
패딩 : 10px;
배경 : # D3CDEE;
}
.share i (
여백-오른쪽 : 15px;
검정색;
텍스트 변환 : 대문자;
}
링크 (크기, 패딩, 배경) 및 레이블에 대한 컨테이너 스타일을 약간 지정했습니다.
아이콘 꾸미기
소셜 (
디스플레이 : 인라인 블록;
너비 : 40px;
높이 : 40px;
배경 : # bdc3c7;
수직 정렬 : 중간;
여백-오른쪽 : 10px;
}
display : inline-block 속성을 사용하여 링크를 블록 요소처럼 보이게 만들었지 만 동시에 행에 서있는 기능을 유지합니다. 다음으로 블록이 서로 인접하지 않도록 오른쪽에 크기와 들여 쓰기를 지정합니다.
좋아요, 그럼 왜 수직 정렬 : 중간이 필요한가요? 이 속성은 컨테이너의 텍스트를 정확하게 수직 중앙에 맞 춥니 다. 또한이 단계에서 이미 시각적으로 볼 수 있도록 세포에 일종의 배경을 제공 할 것입니다. 결과는 공백입니다. 마침내 아이콘을 추가 할 때입니다.
마지막 스테이지
준비된 각 블록에 우리 자신의 아이콘을 배치하여 이것 또는 저 사회를 식별하는 것은 남아 있습니다. 회로망. 이를 위해 가장 정확한 방법을 제안합니다. 스프라이트 그림을 연결하고 배경 위치를 사용하여 모든 것을 제자리에 배치합니다.
간단히 말해 이와 같은 이미지가 필요합니다. 120 ~ 40 대 정도입니다.
css 스타일에 다음 규칙을 추가하십시오.
Social-vk (
배경 : url (icon.png);
}
.social-fb (
배경 : url (icon.png) -40px 0;
}
.social-tw (
배경 : url (icon.png) -78px 0;
}
결과적으로 우리는 아이콘으로 완전히 장식 된 블록을 얻습니다.
우리가 어떻게 얻었는지 이해합니까? 그렇지 않다면 설명하겠습니다. 각 링크 블록의 크기는 40 x 40입니다. 따라서 배경 이미지를 120 x 40으로 설정하면 블록이 완전히 포함 할 수 없기 때문에 가능한 한 많이 보유 할 수 있습니다.
기본적으로이 경우 배경 이미지의 너비와 높이 중 처음 40 픽셀을 가져 오지만 높이를 사용하면 모든 것이 순서대로 정렬됩니다. 이미지는 높이의 블록에 완전히 맞습니다. 따라서 Facebook 및 Twitter 아이콘의 배경 위치 만 등록하면됩니다.
다음과 같이 배경으로 작성 : background : url (icon.png) -40px 0, 우리는 social-fb 블록의 경우 배경 이미지가 지정된 위치 (왼쪽 너비 40 픽셀)에서 정확하게 표시되어야 함을 명시 적으로 나타냅니다. 필요하지 않기 때문에 오프셋없이 높이에서. 정말 간단합니다.
너는 어떤 다른 일을 할 수 있니?
여전히 소셜 네트워크 블록을 추가로 디자인하고 싶을 수도 있습니다. 몇 가지 아이디어가 있습니다. 먼저 모든 아이콘에 반올림을 추가 할 수 있습니다.
소셜 (
테두리 반경 : 5px;
}
둘째, 테두리를 추가 할 수 있습니다.
테두리 : 3px 단색 자주색;
의도적 으로이 경우 보라색이 우리에게 적합합니다. 링크 컨테이너 자체의 모서리를 둥글게 할 수도 있습니다.
다시 말하지만, 많은 디자인 옵션이 있습니다. 물론 색상을 쉽게 변경할 수 있습니다. 이 기사에서는 이러한 디자인 옵션을 제공하지만 이제는 노란색, 녹색, 빨간색 및 기타 모든 아이콘과 같이 자신 만의 방식으로 쉽게 만들 수 있습니다.
결과
보시다시피, 혼자서도 사이트에 소셜 버튼을 매우 쉽게 추가 할 수 있으며 html 및 css가이를 지원합니다. 적어도 시각적으로 우리는 각 특정 사이트의 디자인에 필요에 따라 아이콘을 디자인 할 수 있습니다.
이것으로 오늘의 기사 강의를 마칩니다. 다음에는 CSS에서 다른 것을 만들어 보겠습니다.
우리는 귀하의 웹 사이트, 블로그, 온라인 스토어 또는 기타 웹 리소스를위한 TOP 30 최고의 소셜 미디어 아이콘 세트를 귀하의 관심을 끌고 있습니다.
각 사이트에는 고유 한 스타일, 초점 및 대상 고객이 있으므로 올바른 아이콘을 찾기가 어려울 수 있습니다.
이 컬렉션은 보편적 인 용도와 가장 독특한 웹 사이트 디자인에도 완벽하게 맞는 아이콘 세트를 제공합니다.
일반적으로 아이콘은 웹 사이트 또는 블로그의 바닥 글에 배치됩니다.
최대 5-6 개의 아이콘이 권장됩니다.
오래 된 병 크라운 아이콘 세트
병 뚜껑 형태의 오리지널 스타일 아이콘은 카페, 바 또는 테마 온라인 상점의 웹 사이트에 큰 도움이 될 것입니다.
고품질의 요소 그림과 밝은 디자인은 확실히 웹 리소스 방문자를 끌어 들여 소셜 네트워크의 페이지에 익숙해 질 것입니다.
이 세트는 20 개의 아이콘으로 구성되어 있으며 각 아이콘은 PNG 형식의 별도 도면으로 디자인되었습니다.
빈티지 소셜 미디어 우표
빈티지 소셜 미디어 아이콘은 여행 사이트 나 세계 명소에 대한 블로그에 적합합니다. 이 아이콘은 종종 전문 사진 작가가 포트폴리오에 소셜 미디어 링크를 추가하는 데 사용됩니다.
파일 형식-PNG, PSD. 각 아이콘의 해상도는 256x256px입니다.
나무 사회
이 세트는 10 개의 소셜 미디어 아이콘으로 구성됩니다.
또한 RSS 피드 및 이메일 구독에 대한 이미지가 있습니다.
아카이브의 각 그래픽 문서에는 자체 리소스 파일이 있으며이를 사용하여 도면을 독립적으로 편집하거나 다른 형식으로 다시 저장할 수 있습니다.
기본 형식은 PNG입니다.
SocialMate
이 세트는 보편적이며 모든 사이트 또는 웹 프로젝트에서 사용하기에 적합합니다.
개인화 된 파일 편집을 위해 원본 PSD 파일이 각 요소에 첨부됩니다.
사진의 해상도는 128x128px, 64x64px 및 32x32p입니다.
벡터 3D 사회 아이콘
벡터 3D 아이콘은 웹 사이트에 대한 완전한 바닥 글 요소 집합을 나타내며, 완전히 무료입니다.
밝고 눈길을 끄는 디자인은 소셜 네트워크에서 귀하의 페이지에 대한 신규 구독자를 유치합니다.
파일 형식은 PNG (원본 PSD 문서 포함)입니다. 해상도는 256x256px입니다.
사회 스케치
Social Sketches는 클릭 가능한 소셜 미디어 링크를위한 무료 원본 스티커 아이콘 세트입니다.
이미지의 독특한 모양은 리소스 사용자의 관심을 끌 것입니다.
세트 내용 :
- 16 개의 아이콘;
- 각 요소에 대해 6 가지 해상도 (32px, 48px, 64px, 128px, 256px, 512px)
- 표준 PNG 형식.
사회화
Socialize는 12 개의 라운드 깔끔한 소셜 미디어 아이콘 세트입니다. 각 사이트에 대해 여러 이미지가 한 번에 제공됩니다.
따라서 사이트 또는 블로그 스타일에 가장 적합한 요소를 선택할 수 있습니다.
벡터 유형 이미지는 SVG 형식으로 저장됩니다.
Somacro
Somacro는 다음을 포함한 모든 인기있는 소셜 미디어에 대한 45 개의 품질 아이콘입니다. 페이스 북 , 트위터 , Steam 및 지불 시스템 Paypal, Webmoney.
많은 수의 아이콘을 사용하면 큰 온라인 상점이나 개인 사이트의 바닥 글을 같은 스타일로 디자인 할 수 있습니다.
파일 해상도-500 × 500 픽셀. 각 사진은 총 90 개의 서로 다른 파일에 대해 테두리를 포함하거나 포함하지 않고 사용할 수 있습니다.
전구 소셜 미디어 아이콘
벌브 아이콘은 과학 테마 리소스를위한 인기있는 아이콘 세트입니다.
각 그림의 흥미로운 디자인은 과학, 흥미로운 사실 \u200b\u200b및 기술에 대한 블록에 완벽하게 들어 맞습니다.
그림 9 
투명 소셜 미디어 아이콘
아이콘은 디자인과 테마에 관계없이 모든 사이트와 잘 어울립니다.
미니멀리즘을 좋아하는 사람들을위한 세트가 적합합니다.
유일한 것은 그림이 너무 밝은 배경과 병합 될 수 있다는 것입니다.
사용 가능한 크기 : 48, 56, 72, 96, 128, 256 및 512 픽셀. 아카이브의 이미지 수는 40 개입니다.
원형 평면 아이콘 망막 지원
각 사진에는 생생한 색 구성표가 있으며 각 소셜 네트워크의 스타일을 반영합니다.
이 세트에는 웹 사이트, 인기 프로그램, 놀이터 및 기타 도구에 대한 65 개의 고유 한 이미지가 포함되어 있습니다.
소셜 미디어 아이콘 스티커
Vectezy의 웹 사이트를위한 밝은 아이콘은 사용자를 회사의 소셜 페이지로 끌어들이는 데 유용한 도구입니다.
웹 페이지의 일반적인 레이아웃에 관계없이 그림을 사용할 수 있습니다.
그들은 어둡고 밝은 배경 모두에서 똑같이 좋아 보일 것입니다.
음영 처리 된 소셜 미디어 아이콘
음영 처리 된 소셜 미디어 아이콘에는 그림자 효과가 적용된 40 개의 이미지가 포함되어 있습니다.
밝은 디자인은 밝은 디자인의 웹 사이트에서 사용하기에 적합합니다.
아카이브는 두 가지 버전으로 다운로드 할 수 있습니다.
첫 번째는 무료 라이선스이고 두 번째는 소스 코드를 포함하며 $ 3에 판매됩니다.
사용 가능한 해상도는 48, 56, 72, 96, 128 및 256 픽셀입니다. 형식-PNG.
간단한 라인 아이콘
모든 이미지는 흰색으로 만 제공되므로 배경이 어두운 바닥 글에 세트를 사용해야합니다.
인기있는 사이트의 아이콘뿐만 아니라 결제 시스템, Wi-Fi 및 기타 여러 사진을 사용할 수 있습니다.
Iconmonstr
Iconmonstr은 개발자가 웹 사이트에 고유 한 아이콘을 정기적으로 게시하는 전체 리소스입니다.
500 개 이상의 이미지 중에서 웹 사이트 나 도구에 대한 흑백 아이콘을 찾을 수 있습니다.
모든 파일은 무료로 다운로드 할 수 있습니다.
또한 리소스 페이지에서 원하는 해상도와 파일 형식을 선택할 수 있습니다.
소셜 미디어 긴 그림자 아이콘 세트
소셜 미디어 긴 그림자 아이콘 세트에는 다양한 소셜 네트워크에 대한 35 개의 파일이 포함되어 있습니다. 각 아이콘은 정사각형 모양이며 지정된 리소스의 색 구성표로 만들어지며 모든 방향의 사이트에 적합합니다.
아카이브에는 PNG 파일 만 포함됩니다.
소재 디자인 사회 아이콘
SVF 형식의 8 개의 벡터 아이콘을 사용하면 매력적인 클릭 가능한 링크를 사이트에 추가 할 수있을뿐만 아니라 파일을 직접 조정할 수도 있습니다. 해상도 변경, 그림자 추가, 색상 변경, 투명도 조정 등을 할 수 있습니다.
Instagram, YouTube Facebook, Pinterest, Linkedin, Skype, Google+에서 이미지를 사용할 수 있습니다.
Picons 소셜
Picons Social은 60 개 이상의 다양한 이미지가 포함 된 전문 소셜 미디어 아이콘 팩입니다.
모든 사진은 흑백 형식으로 만들어졌으며 멋지고 "가벼운"디자인입니다.
밝은 색상의 웹 사이트에서 보편적으로 사용하기에 좋습니다.
아카이브에서 각 아이콘에 대해 여러 형식을 사용할 수 있습니다.
- .PSD;
- .주당 순 이익;
- .PDF;
- .PNG;
- .EMF.
원형 및 원형 소셜 미디어 아이콘
16 개의 소셜 미디어 아이콘이 웹 사이트에 큰 도움이 될 것입니다.
밝은 디자인을 사용하면 다른 리소스의 페이지에 대한 링크 필드를 아름답게 강조 할 수 있습니다.
각 이미지의 크기는 58 및 40 픽셀입니다.
또한 Photoshop에서 편집 할 수있는 소스가 있습니다.
평면 최소한의 소셜 미디어 아이콘
아카이브에는 소셜 네트워크를위한 최소한의 비 볼륨 아이콘 85 개가 포함되어 있습니다.
각 사진에는 4 가지 스타일이있어 웹 페이지 디자인에 가장 적합한 디자인을 선택할 수 있습니다.
아이콘에는 PNG와 SVG의 두 가지 형식이 있습니다.
컬러 및 흑백 버전을 사용할 수 있습니다.
16 진수 소셜 미디어 아이콘
이 아이콘 세트는 육각형 형태로 만들어집니다.
개발자는 각 소셜 네트워크에 색 구성표를 부여했습니다.
개발자 웹 사이트에서 이전에 형식과 해상도를 선택한 각 아이콘을 개별적으로 다운로드 할 수 있습니다.
총 32 개의 고유 한 디자인을 사용할 수 있습니다.
평면 소셜 미디어 아이콘 벡터 팩
비디오 호스팅, RSS, 결제 시스템, 블로거 웹 사이트 섹션에 대한 아이콘이 있습니다.
또한 세트에는 HTML5, CSS 아이콘이 포함되어 있습니다.
파일 형식은 Png입니다. 해상도는 58 픽셀입니다.
고급 평면 소셜 미디어 아이콘
각 아이콘에는 그림자 효과와 생생한 색 구성표가 있습니다.
사용 가능한 크기는 72, 96, 128, 256 및 512 픽셀입니다.
각 요소는 사이트의 밝은 톤과 어두운 톤을위한 디자인으로 제공됩니다.
iOS 스타일 소셜 미디어 아이콘
개발자 사이트에서 아카이브를 다운로드하고 컨텐츠의 개인 편집을위한 소스를 얻으십시오.
사용 가능한 형식은 .EPS 및 .AI입니다.
그런 지 평면 사회 아이콘
이 멋진 그런지 아이콘은 댄스 스튜디오, 체육관, 음악 포털, 음반 회사 및 기타 도시 스타일 조직 및 리소스에 가장 적합한 선택입니다.
각 파일은 PSD 형식으로 제공됩니다.
기하학적 소셜 미디어 아이콘
기하학적 스타일로 만들어진 소셜 미디어 용 무료 아이콘은 화장품 매장, 향수, 블로그에 좋은 추가 기능이 될 것입니다.
아이콘의 표준 색 구성표는 밝은 톤으로 만들어집니다.
또한 더 밝거나 더 어두운 스타일 옵션을 선택할 수 있습니다.
모두 하나의 아카이브에서 사용할 수 있습니다.
Rogie 소셜 미디어 아이콘
유명한 웹 일러스트 레이터의 아이콘 세트는 웹 사이트의 정체성을 강조하고 더 많은 구독자를 소셜 미디어로 끌어들입니다.
모든 사진은 컬러와 흑백으로 별도로 제작됩니다.
놀이터, 클라우드 저장소 및 소셜 미디어에 대한 이미지를 사용할 수 있습니다.
Adobe Muse 아이콘
Adobe의 벡터 아이콘은 미니멀 한 바닥 글에 가장 적합한 옵션 중 하나입니다.
이 세트에는 인기있는 웹 사이트, 모바일 운영 체제, 클라우드 스토리지, 결제 시스템 및 기타 인기있는 웹 리소스에 대한 60 장의 사진이 포함되어 있습니다.
120 손으로 그린 \u200b\u200b소셜 미디어 아이콘
이 세트를 다운로드하면 120 개의 고유 한 손으로 그린 \u200b\u200b소셜 미디어 아이콘을 받게됩니다.
각 이미지에는 좋은 디자인과 명확한 선이 있습니다.
DIY 테마 웹 사이트 또는 창의성에 전념하는 기타 리소스의 디자인에 잘 맞습니다.
사용 가능한 형식은 PNG 및 SVG입니다.
블로그 사이트 독자 여러분 안녕하세요. 물론이 작업에 플러그인을 사용할 수 있지만 스스로하는 것은 그렇게 어렵지 않습니다, 특히 그들은 이미 나를 위해 꽤 많이 작동하기 때문에 더 적을 것입니다 (주어진 링크의 기사 참조). 나는 소셜 미디어 아이콘을 가져 왔고, 내가 약간 자세히 썼다 (나는 Dimoks가 이것에 반대하지 않기를 바란다).
또한 이메일에도 적합하다고 생각했습니다.
버튼에서 스프라이트를 만들고 사이트에 Html 코드 삽입
소셜 네트워크에서 필요한 모든 그룹과 페이지를 만든 후에는 필요한 모든 링크를 수신했음을 의미합니다. 사이트에 버튼을 추가하면 당황 할 수 있습니다. 물론 내 게시물에 따라 각 소셜 네트워크에 적합한 아이콘을 선택하고 필요한 경우 크기를 and에서 필요한 크기로 줄일 수 있습니다.
그러나 이것은 최선의 선택이 아닙니다. 왜? 음, 소셜 네트워크의 각 이미지를 업로드하기 위해 별도의 요청이 서버에 작성됩니다. 12 개의 아이콘이 있다면 10 개의 요청을 의미하며 어떤 식 으로든 서버에 추가로드를 생성합니다. 그러한 폐기물은 특히 오래 되었기 때문에 우리에게 적합하지 않습니다.
나는 바퀴를 재발 명하지 않기로 결정했지만 (스프라이트 생성), Share42 생성자에 의해 생성 된 것을 사용했습니다 (작업 방법에 대한 설명에 대한 링크는 바로 위에 제공됩니다). 여기에서 아이콘이 필요한 소셜 네트워크를 선택할 수 있으며 코드와 함께 CSS 스프라이트를 받게됩니다. 필요한 모든 소셜 미디어 아이콘과 RSS 피드 구독 (및 필요한 경우 이메일)을 포함하는 물리적으로 하나의 그래픽 파일.
나는 24 x 24의 아이콘 크기로 뉴스를 구독하기 위해 4 개의 메인 네트워크와 2 개의 아이콘을 선택했다. 그래서 내 스프라이트는 다음과 같이 보인다 (아직 거기에 있지만 상관 없다) :
이제 우리는 사이트에 표시하기위한 그룹 또는 소셜 미디어 페이지 및 아이콘에 대한 링크와 같은 모든 요소를 \u200b\u200b가지고 있습니다. 이 모든 것을 올바르게 준비하는 것만 남아 있습니다. 형세. 내 블로그는 WordPress에서 제공하므로 버튼이있는 코드를 다음 중 하나에 붙여 넣습니다. 제 경우에는 sidebar.php라고합니다. HTML 코드 매우 간단합니다.
글쎄, 그리고 가장 흥미 롭다. 도움을 받아이 특정 위치에 배경으로 표시 될 스프라이트 영역을 결정합니다 (이 경우이 배경은 하이퍼 링크 아래에 배치됨). 이것이 어떻게 발생하는지 설명하는 데 매우 오랜 시간이 걸리므로 링크의 기사를 읽으면 모든 것이 명확해질 것입니다 (주어진 설명 예제가 있습니다). 게으르다면 24의 배수가 아닌 숫자로 실험하십시오.
예, FTP를 사용하여 사이트에 스프라이트 파일을 업로드하고 백그라운드 ()에 경로를 지정합니다. 그게 다야. 위 링크의 자료를주의 깊게 읽어도 문제가 해결되지 않으면 아무 것도 작동하지 않는 경우 주석에 상황을 설명하십시오 (세부적으로 코드를 삽입하려면 PHP 태그에 사각형으로 묶는 것을 잊지 마십시오). 대괄호).
행운을 빕니다! 블로그 사이트 페이지에서 곧 뵙겠습니다.
관심이있을 수 있습니다
