2019년 10월 29일 항목이 업데이트되었습니다.
유리 네메츠
버튼 효과 소셜 네트워크사이트용
소셜 미디어 버튼과 이미지를 결합하는 것이 가능하다고 생각하십니까? 그래서 둘 다 매우 아름답고 창의적으로 보입니다. 예, 당신은 매우 할 수 있습니다 흥미로운 방식으로... 그것도 하나가 아니라 여러 개. 더 정확하게 말하면, 이 기사에서는 이미지 위로 마우스를 가져갈 때 소셜 미디어 버튼에 멋진 효과를 주는 12가지 방법을 찾을 수 있습니다. 어떤 경우에는 호버링뿐만 아니라 마우스 클릭도 필요하여 상호 작용도 추가됩니다. 이미지 위로 마우스를 가져갈 때 이러한 효과를 사용하여 사이트를 눈에 띄게 만드는 특이한 방법입니다.
12가지 예를 모두 보고 아래 링크에서 다운로드하세요.
다운로드
그건 그렇고, 호버 효과와 관련하여이 주제에 대한 사이트에 몇 가지 더 많은 기사가 있습니다.
효과처럼 - 그것을 사용하십시오!
예를 들어 첫 번째 효과가 마음에 들었습니다. 효과를 보려면 아래 이미지 위로 마우스를 가져갑니다.
(이미지 위로 마우스를 이동)
사이트와 한 페이지 판매 사이트 모두에서 가장 중요한 이미지를 강조 표시하는 매우 매력적인 방법입니다. 그러나 이미 쓴 것처럼 훨씬 더 많은 효과(12개!)가 있습니다.
1단계 - HTML
소셜 미디어 버튼에 표시되는 아이콘은 FA(Font Awesome)를 사용합니다. 이 아이콘은 블록 사이에 한 줄로 연결됩니다. :
| 1 | <링크 rel = "스타일시트" href = "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 클래스 = "이미지 효과 폴백"> <div 클래스 = "공유 레이어"> <a href = "#" class = "share-button share-via-vk"> <나는 클래스 = "fa fa-vk"> 연락</ 에이> <a href = "#" 클래스 = "페이스북을 통한 공유 버튼 공유"> <나는 클래스 = "fa fa-facebook"> 페이스북</ 에이> <a href = "#" 클래스 = "트위터를 통한 공유 버튼 공유"> <i class = "fa fa-twitter"> 트위터</ 에이> </ div> <div 클래스 = "이미지 레이어"> <img src = "이미지 / tree.jpg" 너비 = "500" alt = "(! LANG: 캘리포니아 서핑" > !} </ div> </ div> |
필요한 모든 구조가 있습니다. 남은 것은 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 자동; -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- 레이어(-webkit-transform: rotateX(70deg); 변형: 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: 0 0 100px 50px rgba(0, 0, 0, 0.5), 불투명도: 0, -webkit-transition: 모두 0.5초, 전환: 모두 0.5초, -webkit-transform: 회전X(114deg) translateZ(-26px) ) translateY(110px) 스케일(0.75) ); 변환: 회전X(114deg) translateZ(-26px) translateY(110px) scale(0.75); -webkit-transform-origin: 하단; -ms-transform-origin: 하단; 변환 출처: 하단; ) .image-effect-fall-back: hover .image-layer: 전 (불투명도: 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); 변환: rotateX(0deg) translateY(-70px);) / * 모든 버튼의 스타일 * /.share-button (디스플레이: 인라인 블록; 텍스트 장식: 없음; 색상: #ffffff; 패딩: 12px; 너비: 90px; 테두리 반경: 2px; 여백: 25px 10px;) / * 소셜 미디어 버튼의 색상 * /.share-via-vk(배경색: # 4C75A3;) .share-via-facebook(배경색: # 3b5998;) .share-via-twitter(배경색: # 00aced;) |
즉시 경고합니다. 일부 예제에서는 jQuery를 사용합니다. 왜냐하면 전체 효과를 보려면 이미지를 클릭해야 하기 때문입니다. 원하는 예제가 있는 페이지에 사용된 모든 JS 코드를 가져오기만 하면 됩니다.
주목! CSS 코드를 스타일시트에 붙여넣은 후 버튼이 예제와 같이 정확하게 표시되지 않을 수 있습니다. 이는 스타일시트에 데모에 사용된 요소 및 클래스에 대한 스타일이 다르기 때문일 수 있습니다.
산출
원칙적으로 창의성은 항상 환영받았습니다. 저는 여기에서 모두가 12가지 효과 중 하나를 선택하여 향후 자신의 프로젝트에 사용할 수 있을 것이라고 생각합니다.
- 크기 조정은 품질에 영향을 미치지 않으며,
- Retina 디스플레이를 포함한 모든 장치에 완벽하게 표시되며,
- 배경, 색상, 그림자 등과 같이 텍스트에 적용할 수 있는 거의 모든 스타일의 적용,
- 구현 용이성;
소셜 네트워크 아이콘이 있는 주의 글꼴입니다.
1. RONDO 소셜 아이콘 글꼴
가장 인기 있는 소셜 네트워크의 우수한 글꼴 아이콘일 뿐만 아니라 불행히도 모두가 좋아하는 우리의 아이콘이 없습니다.2. Fontello - 아이콘 글꼴 생성기
기성품 아이콘의 거대한 세트가 있는 아이콘 생성기. 장점 중 하나는 필요한 아이콘만 선택하고 해당 아이콘에서 글꼴을 생성할 수 있다는 것입니다. 이는 페이지 최적화 및 해당 글꼴의 로딩 속도에 유리하게 영향을 미칩니다. 장점 중 Vkontakte 및 Odnoklassniki와 같은 소셜 네트워크 아이콘의 존재를 강조할 수도 있습니다.
3. 모노 소셜 아이콘 글꼴
글꼴 아이콘을 프로젝트에 신속하게 통합하기 위한 이상적인 솔루션으로 CSS, SCSS 및 HTML 예제... 유일한 단점은 인기있는 러시아 소셜 네트워크가 없다는 것입니다.
4. Pixeden - 소셜 아이콘 팩
강력한 데모 페이지가 있는 멋진 아이콘, 글꼴 아이콘을 사용하고 CSS로 스타일을 지정하는 아름다움을 볼 수 있습니다.
내 블로그에 오신 것을 환영합니다. 오늘은 html로 조판하는 방법을 단계별로 보여드리고자 합니다. CSS 버튼소셜 네트워크. 완전한 0에서 시작하여 원하는 결과로 끝내자. 앞으로!
마크업 및 기본 스타일
링크의 URL에 해시를 넣었습니다. 물론 실제로 사용할 때 각 링크에는 전환이 발생할 작업 주소가 있어야 합니다.
지금은 다음 스타일을 추가해 보겠습니다.
공유하다 (
너비: 280px;
여백: 0 자동;
패딩: 10px;
배경: # D3CDEE;
}
.공유 나 (
오른쪽 여백: 15px;
검정색;
텍스트 변환: 대문자;
}
링크(크기, 패딩, 배경) 및 캡션에 대한 컨테이너의 스타일을 약간 지정했습니다.
장식 아이콘
사회의 (
디스플레이: 인라인 블록;
너비: 40px;
높이: 40px;
배경: # bdc3c7;
수직 정렬: 중간;
오른쪽 여백: 10px;
}
display: inline-block 속성을 사용하여 링크를 다음으로 변환했습니다. 블록 요소, 그러나 동시에 연속으로 서 있는 능력을 유지했습니다. 다음으로 블록이 서로 인접하지 않도록 오른쪽에 크기와 들여쓰기를 표시합니다.
자, 그럼 왜 vertical-align: middle이 필요한가요? 이 속성은 컨테이너의 텍스트가 수직으로 정확히 가운데에 오도록 정렬합니다. 또한 이 단계에서 이미 시각적으로 볼 수 있도록 세포에 배경을 제공합니다. 결과는 공백입니다. 드디어 아이콘을 추가할 차례입니다.
최종 단계
준비된 각 블록에 우리 자신의 아이콘을 배치하여 소셜을 식별할 수 있습니다. 회로망. 이렇게하려면 가장 많이 사용하는 것이 좋습니다. 올바른 방법- 스프라이트 사진을 연결하고 배경 위치를 사용하여 모든 것을 제자리에 놓습니다.
요컨대, 우리는 이와 같은 이미지가 필요합니다. 120~40정도 가지고 있습니다.
CSS 스타일에 다음 규칙을 추가합니다.
소셜-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입니다.
소셜메이트
이 세트는 보편적이며 모든 사이트 또는 웹 프로젝트에서 사용하기에 적합합니다.
파일의 개인화 편집을 위해 원본 PSD 파일이 각 요소에 첨부됩니다.
사진의 해상도는 128x128px, 64x64px 및 32x32p입니다.
벡터 3D 사회 아이콘
벡터 3D 아이콘은 완전히 무료인 웹사이트의 전체 바닥글 요소 세트를 나타냅니다.
밝고 눈에 띄는 디자인은 소셜 네트워크의 페이지에 대한 새로운 구독자를 끌어들일 것입니다.
파일 형식은 PNG(원본 PSD 문서 포함)입니다. 해상도는 256x256px입니다.
소셜 스케치
소셜 스케치는 클릭 가능한 소셜 미디어 링크를 위한 무료 오리지널 스티커 아이콘 세트입니다.
이미지의 독특한 모양은 리소스 사용자의 관심을 끌 것입니다.
세트 내용:
- 16개의 아이콘;
- 각 요소에 대한 6가지 해상도(32px, 48px, 64px, 128px, 256px, 512px)
- 표준 PNG 형식입니다.
사회화
Socialize는 12개의 둥근 깔끔한 소셜 미디어 아이콘 세트입니다. 각 사이트에 대해 여러 이미지가 한 번에 제공됩니다.
따라서 사이트나 블로그의 스타일에 가장 적합한 요소를 선택할 수 있습니다.
벡터 유형 이미지는 SVG 형식으로 저장됩니다.
소마크로
Somacro는 다음을 포함한 모든 인기 있는 소셜 미디어를 위한 45개의 품질 아이콘입니다. 페이스북 , 트위터, Steam 및 지불 시스템 Paypal, Webmoney.
많은 수의 아이콘을 사용하면 대형 온라인 상점이나 개인 사이트의 바닥글을 동일한 스타일로 디자인할 수 있습니다.
파일 해상도 - 500 × 500픽셀. 각 사진은 테두리가 있거나 없는 총 90개의 파일로 사용할 수 있습니다.
전구 소셜 미디어 아이콘
전구 아이콘은 과학 테마 리소스에 대한 인기 있는 아이콘 세트입니다.
각 그림의 흥미로운 디자인은 과학에 대한 블록에 완벽하게 들어 맞습니다. 흥미로운 사실, 기술.
그림 9 
투명 소셜 미디어 아이콘
아이콘은 디자인과 테마에 관계없이 모든 웹사이트와 잘 어울립니다.
이 세트는 미니멀리즘을 좋아하는 사람들에게 적합합니다.
유일한 것은 사진이 너무 밝은 배경과 합쳐질 수 있다는 것입니다.
사용 가능한 크기: 48, 56, 72, 96, 128, 256 및 512픽셀. 아카이브의 이미지 수는 40개입니다.
원형 평면 아이콘 Retina 지원
사진마다 생생한 색상 범위각 소셜 네트워크의 스타일을 표시합니다.
이 세트에는 웹사이트, 인기 프로그램, 놀이터 및 기타 도구에 대한 65개의 고유한 이미지가 포함되어 있습니다.
소셜 미디어 아이콘 스티커
Vectezy의 웹사이트에 대한 밝은 아이콘이 될 것입니다. 훌륭한 도구사용자를 유치하기 위해 소셜 페이지너의 회사.
사진은 웹페이지의 일반적인 레이아웃과 상관없이 사용할 수 있습니다.
그들은 어두운 배경과 밝은 배경 모두에서 똑같이 좋게 보입니다.
음영 처리된 소셜 미디어 아이콘
음영 처리된 소셜 미디어 아이콘에는 그림자 효과가 있는 40개의 이미지가 포함되어 있습니다.
밝은 디자인은 밝은 디자인의 사이트에서 사용하기에 적합합니다.
아카이브는 두 가지 버전으로 다운로드할 수 있습니다.
첫 번째는 무료 라이센스, 두 번째 것은 소스를 포함하며 $3에 판매됩니다.
사용 가능한 해상도는 48, 56, 72, 96, 128 및 256픽셀입니다. 형식 - PNG.
간단한 라인 아이콘
모든 이미지는 흰색으로만 제공되므로 배경이 어두운 바닥글에 세트를 사용해야 합니다.
인기 사이트의 아이콘뿐만 아니라 결제 시스템, Wi-Fi 등의 사진도 제공됩니다.
아이콘몬스트
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의 벡터 아이콘은 미니멀리스트 바닥글을 위한 최고의 옵션 중 하나입니다.
세트에는 인기 사이트, 모바일 이미지 60개가 포함되어 있습니다. 운영체제, 클라우드 스토리지, 결제 시스템 및 기타 인기 있는 웹 리소스.
120 손으로 그린 소셜 미디어 아이콘
이 세트를 다운로드하면 120개의 고유한 손으로 그린 소셜 미디어 아이콘을 받게 됩니다.
각 이미지는 좋은 디자인과 명확한 선 그리기를 가지고 있습니다.
DIY 테마 웹사이트의 디자인이나 창의성에 전념하는 기타 리소스에 잘 맞습니다.
사용 가능한 형식은 PNG 및 SVG입니다.
블로그 사이트 독자 여러분 안녕하세요. 물론 이 작업에 플러그인을 사용할 수 있지만 스스로 하는 것은 그렇게 어렵지 않다, 특히 내가 이미 많은 사람들을 위해 일하고 있기 때문에 더 적을 것입니다(주어진 링크의 기사 참조). 나는 이미 자세하게 쓴 소셜 미디어 아이콘을 가져 왔습니다 (Dimoks가 이에 반대하지 않기를 바랍니다).
그리고 이메일에도 적합하다고 생각했습니다.
버튼에서 스프라이트를 만들고 HTML 코드를 사이트에 삽입하십시오.
결국 필수 그룹소셜 네트워크에서 페이지를 만들었습니다. 즉, 필요한 모든 링크를 받았다는 의미입니다. 사이트에 버튼을 추가하면 당황할 수 있습니다. 물론 내 게시물에 따라 각 소셜 네트워크에 적합한 아이콘을 선택하고 필요한 경우 크기를 필요한 크기로 줄일 수 있습니다.
하지만 그렇지 않다 가장 좋은 방법... 왜요? 글쎄, 소셜 네트워크의 각 이미지를 업로드하기 위해 서버에 별도의 요청이 이루어지기 때문입니다. 12개의 아이콘이 있는 경우 10개의 요청을 의미하며, 이는 어떤 식으로든 서버에 추가 로드를 생성합니다. 그러한 폐기물은 특히 오래 전부터 우리에게 적합하지 않습니다.
나는 바퀴를 재발명하지 않기로 결정했지만(스프라이트 생성) Share42 생성자가 생성한 것을 사용했습니다(작업 방법에 대한 설명은 바로 위에 있음). 여기에서 필요한 아이콘인 소셜 네트워크를 선택할 수 있으며 코드와 함께 CSS 스프라이트를 받을 수 있습니다. 필요한 모든 소셜 미디어 아이콘과 RSS 피드 구독(필요한 경우 이메일)이 포함된 물리적으로 하나의 그래픽 파일입니다.
저는 4개의 주요 네트워크와 아이콘 크기가 24 x 24인 뉴스 구독용 아이콘 몇 개를 선택했습니다. 그래서 제 스프라이트는 다음과 같이 생겼습니다(아직 거기에 있지만 중요하지 않습니다).
이제 모든 구성 요소가 있습니다. 그룹 또는 소셜 미디어 페이지에 대한 링크와 사이트에 표시하기 위한 아이콘입니다. 이 모든 것을 올바르게 준비하는 것만 남아 있습니다. 형세. 내 블로그는 WordPress에 의해 구동되므로 버튼이 있는 코드를 다음 중 하나에 붙여넣을 것입니다. 제 경우에는 sidebar.php라고 합니다. HTML 코드 매우 간단합니다.
글쎄, 그리고 가장 흥미로운. 도움을 받아 이 특정 위치에 배경으로 표시할 스프라이트 영역을 결정합니다(이 경우 이 배경은 하이퍼링크 아래에 배치됨). 이것이 어떻게 발생하는지 설명하는 데 매우 오랜 시간이 걸리므로 링크의 기사를 읽으면 모든 것이 명확해질 것입니다(예시가 있음). 게으르다면 숫자로 실험해 보십시오. 눈치채셨겠지만 24의 배수가 아닙니다.
예, FTP를 사용하여 사이트에 스프라이트 파일을 업로드하고 백그라운드에서 경로를 지정합니다(). 그게 다야. 문제가 해결되지 않으면 위 링크의 자료를 더 주의 깊게 읽고 아무 일도 일어나지 않으면 주석에 상황을 설명하십시오(자세히 - 코드를 삽입하려면 PHP 태그에 정사각형으로 묶는 것을 잊지 마십시오. 괄호).
행운을 빕니다! 블로그 사이트 페이지에서 곧 만나요
당신은 관심이있을 수 있습니다
